在 webpack 4 中获取可变模式开发或生产
Get variable mode development or production in webpack 4
我正在使用 Webpack 4,我想在配置中使用 env 环境变量。我如何使用 --development 和 --production 模式获取此变量? DefinePlugin 不起作用,文档什么也没说。
也许你可以这样做:
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
};
};
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,我想在配置中使用 env 环境变量。我如何使用 --development 和 --production 模式获取此变量? DefinePlugin 不起作用,文档什么也没说。
也许你可以这样做:
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
};
};
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