在 webpack 4 中获取可变模式开发或生产

Question

我正在使用 Webpack 4，我想在配置中使用 env 环境变量。我如何使用 --development 和 --production 模式获取此变量？ DefinePlugin 不起作用，文档什么也没说。

Answer 1

也许你可以这样做：

package.json:

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js --env.NODE_ENV=development",
  "build": "webpack --config webpack.config.js --env.NODE_ENV=production"
},

webpack.config.js:

module.exports = (env) => {
  return {
    mode: env.NODE_ENV,
    // ...rest of config based on environment
  };
};

more on passing environmental variables to config.

Answer 2

OP 问的是 webpack4。在 webpack4 中，可以使用 --mode 参数，它会在 webpack 配置中自动设置 mode。

如何在 webpack 配置中使用 `mode`？

将 mode 传递给 webpack-cli 的示例方法：

"scripts": {
  "start:dev": "webpack --mode development --watch"
}

在 webpack 配置中，您可以使用第二个参数 argv 来访问参数：

module.exports = (env, argv) => ({
...
   watch: argv.mode !== 'production',
...
})

更新

如果您使用 IDE 读取 webpack 配置（例如 Intellij IDEA），您可能需要为 argv:

传递一些默认值

module.exports = (env, argv = {}) => ({

为了即使 IDE 没有通过 argv 也有有效的配置（在我的例子中，我需要它来支持 IDE 中的 webpack 别名模块解析）。

update2

另一件事是babel配置。也许这是一个鲜为人知的事实，但 babel 及其预设和插件可以对 NODE_ENV 做出反应（它也是可配置的），例如你可以配置 @babel/preset-react 的 development 选项（https://babeljs.io/docs/en/babel-preset-react#development). 为了做到这一点，你仍然需要在运行 webpack.

之前设置 NODE_ENV （默认情况下或者如果你修改了 babel.config.js 的话）

为什么？ --mode 所做的唯一事情是 1) 该值可通过您的配置中的 argv.mode 获得 2) 通过 DefinePlugin 为您的捆绑包设置 NODE_ENV 但是 NODE_ENV 没有为 webpack 配置本身和加载器设置。

最后，如果你想要打包环境和生成的包之间的一致性，你可以使用以下方法：

cross-env NODE_ENV=production webpack --mode production

在 webpack 4 中获取可变模式开发或生产

Get variable mode development or production in webpack 4

webpack

webpack-4

如何在 webpack 配置中使用 `mode`？

在 webpack 4 中获取可变模式开发或生产

Get variable mode development or production in webpack 4

webpack

webpack-4

如何在 webpack 配置中使用 mode？

如何在 webpack 配置中使用 `mode`？