title: Adding plugin to Webpack with Rails
body: <p>I'm using the Webpacker gem with Rails 5.2, and would like to access the environment in the Front End by setting a NODE_ENV global variable.<br>
  This is my config/webpack/environment.js file :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { environment } = require('@rails/webpacker')
  
  // Bootstrap 3 has a dependency over jQuery:
  const webpack = require('webpack')
  
  environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )
  
  module.exports = environment</code></pre>
  </div>
  </div>
  </p>
  
  <p>I saw that I needed to add the following plugin to webpack to be able access the environment in the front-end :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  new webpack.DefinePlugin({
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I don't know how to add it... I tried many options, including the line below and it always, either doesn't work, or break jQuery (i.e. Uncaught ReferenceError: jQuery is not defined) :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>environment.plugins.prepend('Provide',
    new webpack.DefinePlugin({
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  )</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be welcome, I've been struggling with that for hours..
  Thanks a lot !!</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I found the solution... turns out you just need to  prepend / append a new plugin and give it a different name that those of your other plugins. Now my config/webpack/environment.js looks like that :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { environment } = require('@rails/webpacker')
  
  // Bootstrap 3 has a dependency over jQuery:
  const webpack = require('webpack')
  
  environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  )
  
  environment.plugins.prepend('env',
    new webpack.DefinePlugin({
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  )
  
  
  module.exports = environment</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can now access NODE_ENV from every js/jsx file !!</p>