title: Webpack and Lighthouse performance test
body: <p>Hy,</p>
  <p>I'm new to webpack and after hard learning I know that I know nothing :-).</p>
  <p>I'm using React and I have 2 questions:</p>
  <ol>
  <li>How can I run my build version in the browser, for the lighthouse test. At the moment I'm using <em>npm run dist</em> (below package.json). Which is working but I have the feeling it is not the correct way and my <em>dist</em> folder gets deleted. If I use <em>npx create-react-app</em> I can use <em>serve -s build</em> therefor.</li>
  <li>If I make my Lighthouse performance test I get &quot;Enable text compression&quot;. So I installed the <em>compression-webpack-plugin</em> and <em>brotli-webpack-plugin</em>. I have now in the dist folder the br and gz files but in the HTTP response header I don't get <em>Content-Encoding: br or gzip</em> and lighthouse still blames me for this.</li>
  </ol>
  <p>package.jsong</p>
  <pre><code>&quot;scripts&quot;: {
          &quot;start&quot;: &quot;webpack-dev-server --config webpack.dev.js --open --progress --colors --hot&quot;,
          &quot;dist&quot;: &quot;webpack-dev-server --config webpack.prod.js --open  --mode production&quot;,
          &quot;build&quot;: &quot;webpack --config webpack.prod.js&quot;
  }
  </code></pre>
  <p>webpack.common.js</p>
  <pre><code>const HtmlWebPackPlugin = require(&quot;html-webpack-plugin&quot;);
  const { CleanWebpackPlugin } = require(&quot;clean-webpack-plugin&quot;);
  
  module.exports = {
      entry: {
          main: &quot;./src/index.js&quot;
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: {
                      loader: &quot;babel-loader&quot;
                  }
              },
              {
                  test: /\.html$/,
                  use: [
                      {
                          loader: &quot;html-loader&quot;,
                          options: {
                              attributes: true
                          }
                      }
                  ]
              },
              {
                  test: /\.(svg|png|jpg|gif|webp|jpeg)$/,
                  use: {
                      loader: &quot;file-loader&quot;,
                      options: {
                          name: &quot;[name].[hash].[ext]&quot;,
                          outputPath: &quot;imgs&quot;
                      }
                  }
              }
          ]
      },
      plugins: [
          new CleanWebpackPlugin(),
          new HtmlWebPackPlugin({
              template: &quot;./src/index.html&quot;,
              filename: &quot;./index.html&quot;
          })
      ]
  };
  
  </code></pre>
  <p>webpack.dev.js</p>
  <pre><code>var path = require(&quot;path&quot;);
  const { merge } = require(&quot;webpack-merge&quot;);
  const common = require(&quot;./webpack.common&quot;);
  
  module.exports = merge(common, {
      mode: &quot;development&quot;,
      output: {
          path: path.resolve(__dirname, &quot;dist&quot;),
          filename: &quot;[name].bundle.js&quot;,
          publicPath: &quot;/&quot;
      },
      devServer: {
          historyApiFallback: true,
          contentBase: &quot;./dist&quot;
      }
  });
  
  </code></pre>
  <p>webpack.prod.js</p>
  <pre><code>var path = require(&quot;path&quot;);
  const { merge } = require(&quot;webpack-merge&quot;);
  const common = require(&quot;./webpack.common&quot;);
  const CompressionPlugin = require(&quot;compression-webpack-plugin&quot;);
  const BrotliPlugin = require(&quot;brotli-webpack-plugin&quot;);
  const TerserPlugin = require(&quot;terser-webpack-plugin&quot;);
  
  module.exports = merge(common, {
      mode: &quot;production&quot;,
      output: {
          path: path.resolve(__dirname, &quot;dist&quot;),
          filename: &quot;[name].[hash].bundle.js&quot;
      },
      devtool: &quot;source-map&quot;,
      performance: {
          hints: false
      },
      optimization: {
          splitChunks: {
              chunks: &quot;all&quot;
          },
          minimizer: [
              new TerserPlugin({
                  parallel: true,
                  cache: true,
                  sourceMap: true
              })
          ]
      },
      plugins: [
          new CompressionPlugin({
              filename: &quot;[path].gz[query]&quot;,
              algorithm: &quot;gzip&quot;,
              test: /\.(js|html|svg)$/,
              threshold: 8192,
              minRatio: 0.8
          }),
          new BrotliPlugin({
              asset: &quot;[path].br[query]&quot;,
              test: /\.(js|html|svg)$/,
              threshold: 10240,
              minRatio: 0.8
          })
      ]
  });
  
  </code></pre>
  <p>.babelrc</p>
  <pre><code>{
      &quot;presets&quot;: [&quot;@babel/preset-env&quot;, &quot;@babel/preset-react&quot;],
      &quot;plugins&quot;: [[&quot;@babel/transform-runtime&quot;]]
  }
  </code></pre>
  <p>THX for any help.</p>