title: Enable text compression using React, Webpack and Apache
body: <p>Supposedly <a href="https://github.com/webpack-contrib/compression-webpack-plugin" rel="noreferrer">the compression-webpack-plugin</a> is supposed to do it.</p>
  
  <p>I installed the plugin with npm </p>
  
  <pre><code>npm install compression-webpack-plugin --save-dev
  </code></pre>
  
  <p>And edited my webpack.config.js file to include </p>
  
  <pre><code>const CompressionPlugin = require('compression-webpack-plugin');
  
  ...
    plugins: [
      new CompressionPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.(js|css)$/i,
      }),
  ...
  </code></pre>
  
  <p>When I used <a href="https://developers.google.com/speed/pagespeed/insights/" rel="noreferrer">page insights</a> to check how fast my webpage loads, it looks like my gz files aren't recognized, or at least one of them isn't recognized</p>
  
  <p><a href="https://i.stack.imgur.com/h1VNd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/h1VNd.png" alt="enter image description here"></a></p>
  
  <p>This is my main directory</p>
  
  <p><a href="https://i.stack.imgur.com/1OBkr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1OBkr.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><a href="https://stackoverflow.com/questions/50442039/compression-webpack-plugin">This question</a> is pretty similar to my question. I am trying to avoid using .htaccess though because I heard somewhere that it's not the best to use with react and webpack. Perhaps this is wrong?</p>
  
  <p>I tried using kushalvm's solution, but it is not working for me.</p>