1

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

4

2 回答 2

2

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

如何mode在 webpack 配置中使用？

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

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

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

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

更新

如果您使用读取 webpack 配置的 IDE（例如 Intellij IDEA），您可能需要传递一些默认值argv：

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

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

更新2

另一件事是 babel 配置。也许这是一个鲜为人知的事实，但 babel 及其预设和插件可以做出反应NODE_ENV（它也是可配置的），例如您可以配置( https://babeljs.io/docs/en/babel-preset-react#developmentdevelopment的选项）。为了做到这一点，您仍然需要在运行 webpack 之前进行设置（默认情况下或其他，如果您修改了）。@babel/preset-reactNODE_ENVbabel.config.js

为什么？唯一要做的事情--mode是 1）该值argv.mode在您的配置中可用 via 2）为您的捆绑包设置NODE_ENVvia但是没有为 webpack 配置本身或加载程序设置。DefinePlugin NODE_ENV

最后，如果您想要捆绑环境和生成的捆绑包之间的一致性，可以使用以下内容：

cross-env NODE_ENV=production webpack --mode production
于 2018-06-04T10:02:33.663 回答
1

也许你可以做这样的事情：

包.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
  };
};

更多关于将环境变量传递给配置。

于 2018-03-17T15:25:06.907 回答