title: webpack production mode "build" - force browser not to read cached file/rebuild fresh files
body: <p>We have an application (a website) with some React components, css and js compiled with webpack.</p>
  <p>Our workflow is to <code>npm run start</code> in the <code>/src/</code> folder while developing locally, which generates CSS and JS files in <code>/dist/</code> then run <code>npm run build</code> to clear down refresh all the files in the <code>/dist/</code> folder before deploying to live. That is the intent, anyway.</p>
  <p>The problem is, when we deploy a change to the live environment, it seems the browser still has previous versions of the CSS/JS files cached, or not reading correctly from the new versions. This only happens with the hashed/chunked (React component) files (see ** in file structure below), not the main.js or main.scss file.</p>
  <p>We thought webpack produced new 'chunks'/files with each build. Is there a way we can force webpack to do this so the files are read as new when they change, or the filenames are different? I do want the files to be cached by the browser, but I also want new changes to be accounted for.</p>
  <p><strong>Example File Structure</strong></p>
  <pre><code>--/src/
  ----/scss/
  ------main.scss
  ----/js/
  ------main.js (imports js components)
  ------/components/
  --------banner.js
  --------ReactComponent.jsx (imports ReactComponent.scss)
  --------ReactComponent.scss
  --/dist/
  ----/css/
  ------main.css
  ------2.css (react component css) (**)
  ------6.css (react component css) (**)
  ----/js/
  ------main.js
  ------0_39cd0323ec029f4edc2f.js (react component js) (**)
  ------1_c03b31c54dc165cb590e.js (react component js) (**)
  </code></pre>
  <p>** these are the files that seem to get cached or not read properly when changes are made.</p>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>const webpack = require(&quot;webpack&quot;);
  const path = require(&quot;path&quot;);
  const autoprefixer = require(&quot;autoprefixer&quot;);
  const TerserJSPlugin = require(&quot;terser-webpack-plugin&quot;);
  const MiniCssExtractPlugin = require(&quot;mini-css-extract-plugin&quot;);
  const OptimizeCSSAssetsPlugin = require(&quot;optimize-css-assets-webpack-plugin&quot;);
  
  module.exports = {
    entry: {
      main: [&quot;./js/main.js&quot;, &quot;./scss/main.scss&quot;],
    },
    output: {
      filename: &quot;js/[name].js&quot;,
      chunkFilename: &quot;js/[name]_[chunkhash].js&quot;,
      path: path.resolve(__dirname, &quot;../dist/&quot;),
      publicPath: &quot;/app/themes/[package]/dist/&quot;,
      jsonpFunction: &quot;o3iv79tz90732goag&quot;
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /(node_modules)/,
          use: {
            loader: &quot;babel-loader&quot;
          }
        },
        {
          test: /\.(sass|scss|css)$/,
          exclude: &quot;/node_modules/&quot;,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: &quot;css-loader&quot;,
              options: {
                importLoaders: 2,
                sourceMap: true
              }
            },
            {
              loader: &quot;postcss-loader&quot;,
              options: {
                plugins: () =&gt; [require(&quot;precss&quot;), require(&quot;autoprefixer&quot;)],
                sourceMap: true
              }
            },
            {
              loader: &quot;sass-loader&quot;,
              options: {
                sourceMap: true,
                includePaths: [path.resolve(__dirname, &quot;../src/scss&quot;)]
              }
            }
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [&quot;file-loader&quot;]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [&quot;file-loader&quot;]
        }
      ]
    },
    optimization: {
      minimizer: [
        new TerserJSPlugin({
          cache: true,
          parallel: true,
          sourceMap: true
        }),
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            safe: true,
            zindex: false,
            discardComments: {
              removeAll: true
            }
          },
          canPrint: true
        })
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: &quot;css/[name].css&quot;,
        chunkFilename: &quot;css/[id].css&quot;
      })
    ]
  };
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>    {
          &quot;name&quot;: &quot;packagename&quot;,
          &quot;version&quot;: &quot;1.0.0&quot;,
          &quot;description&quot;: &quot;&quot;,
          &quot;main&quot;: &quot;index.js&quot;,
          &quot;scripts&quot;: {
              &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
              &quot;build&quot;: &quot;(rm -rf ./../dist/*) &amp; webpack --mode production&quot;,
              &quot;start&quot;: &quot;webpack --mode development --watch &quot;
          },
          &quot;keywords&quot;: [],
          &quot;author&quot;: &quot;Sarah&quot;,
          &quot;license&quot;: &quot;ISC&quot;,
          &quot;browserslist&quot;: [
              &quot;last 4 versions&quot;
          ],
          &quot;devDependencies&quot;: {
              &quot;@babel/core&quot;: &quot;^7.9.0&quot;,
              &quot;@babel/plugin-proposal-object-rest-spread&quot;: &quot;^7.9.5&quot;,
              &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.8.3&quot;,
              &quot;@babel/plugin-transform-arrow-functions&quot;: &quot;^7.2.0&quot;,
              &quot;@babel/plugin-transform-classes&quot;: &quot;^7.9.5&quot;,
              &quot;@babel/plugin-transform-flow-strip-types&quot;: &quot;^7.9.0&quot;,
              &quot;@babel/plugin-transform-react-jsx&quot;: &quot;^7.9.4&quot;,
              &quot;@babel/preset-env&quot;: &quot;^7.9.5&quot;,
              &quot;@babel/preset-flow&quot;: &quot;^7.9.0&quot;,
              &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
              &quot;autoprefixer&quot;: &quot;^7.1.1&quot;,
              &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
              &quot;babel-plugin-transform-es2015-shorthand-properties&quot;: &quot;^6.24.1&quot;,
              &quot;babel-preset-env&quot;: &quot;^1.7.0&quot;,
              &quot;browser-sync&quot;: &quot;^2.26.7&quot;,
              &quot;browser-sync-webpack-plugin&quot;: &quot;^2.2&quot;,
              &quot;copy-webpack-plugin&quot;: &quot;^4.0.1&quot;,
              &quot;css-loader&quot;: &quot;^3.5.3&quot;,
              &quot;cssnano&quot;: &quot;^4.1.10&quot;,
              &quot;mini-css-extract-plugin&quot;: &quot;^0.8.2&quot;,
              &quot;node-sass&quot;: &quot;^4.14.0&quot;,
              &quot;optimize-css-assets-webpack-plugin&quot;: &quot;^5.0.3&quot;,
              &quot;postcss-loader&quot;: &quot;^2.0.5&quot;,
              &quot;precss&quot;: &quot;^4.0.0&quot;,
              &quot;resolve-url-loader&quot;: &quot;^2.0.2&quot;,
              &quot;sass-loader&quot;: &quot;^6.0.5&quot;,
              &quot;terser-webpack-plugin&quot;: &quot;^2.3.6&quot;,
              &quot;webpack&quot;: &quot;^4.43.0&quot;,
              &quot;webpack-cli&quot;: &quot;^3.3.11&quot;
          },
          &quot;dependencies&quot;: {
              &quot;axios&quot;: &quot;^0.19.2&quot;,
              &quot;body-scroll-lock&quot;: &quot;^2.7.1&quot;,
              &quot;can-autoplay&quot;: &quot;^3.0.0&quot;,
              &quot;debounce&quot;: &quot;^1.0.2&quot;,
              &quot;file-loader&quot;: &quot;^5.1.0&quot;,
              &quot;lazysizes&quot;: &quot;^4.1.8&quot;,
              &quot;moment&quot;: &quot;^2.24.0&quot;,
              &quot;objectFitPolyfill&quot;: &quot;^2.3.0&quot;,
              &quot;promise-polyfill&quot;: &quot;^8.1.3&quot;,
              &quot;react&quot;: &quot;^16.9.0&quot;,
              &quot;react-content-loader&quot;: &quot;^5.0.4&quot;,
              &quot;react-device-detect&quot;: &quot;^1.12.1&quot;,
              &quot;react-dom&quot;: &quot;^16.9.0&quot;,
              &quot;react-html-parser&quot;: &quot;^2.0.2&quot;,
              &quot;react-intersection-observer&quot;: &quot;^8.26.2&quot;,
              &quot;react-moment&quot;: &quot;^0.9.7&quot;,
              &quot;react-pdf&quot;: &quot;^4.1.0&quot;,
              &quot;scrollmonitor&quot;: &quot;^1.2.4&quot;,
              &quot;socket.io&quot;: &quot;^2.3.0&quot;
          }
      }
  </code></pre>