使用 Rails 向 Webpack 添加插件

Question

我正在将 Webpacker gem 与 Rails 5.2 一起使用，并希望通过设置 NODE_ENV 全局变量来访问前端中的环境。
这是我的 config/webpack/environment.js 文件：

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

我看到我需要在 webpack 中添加以下插件才能访问前端的环境：

  new webpack.DefinePlugin({
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })

但我不知道如何添加它......我尝试了很多选项，包括下面的行，但它总是不起作用，或者破坏 jQuery（即 Uncaught ReferenceError: jQuery is not defined）：

environment.plugins.prepend('Provide',
  new webpack.DefinePlugin({
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })
)

欢迎任何帮助，我已经为此苦苦挣扎了几个小时..非常感谢！

---

编辑

我找到了解决方案......原来你只需要预先/附加一个新插件并给它一个与其他插件不同的名称。现在我的 config/webpack/environment.js 看起来像这样：

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

我现在可以从每个 js/jsx 文件访问 NODE_ENV ！！

Answer 1

事实证明，您只需要预先添加/追加一个新插件，并为其指定一个与其他插件不同的名称。现在我的 config/webpack/environment.js 看起来像这样：

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

我现在可以NODE_ENV从每个 js/jsx 文件访问！

_{这个答案是由OP oruhtra在CC BY-SA 4.0下作为对问题Adding plugin to Webpack with Rails的编辑发布的。}