在 webpack.config.js 中获取当前的 `--mode`
Get current `--mode` in webpack.config.js
如何在webpack.config.js中获取package.json中指定的当前--mode
? (例如,用于推送一些插件。)
package.json
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
我在 Webpack 3 中做了什么:
package.json
"scripts": {
"build": "cross-env NODE_ENV=development webpack",
"prod": "cross-env NODE_ENV=production webpack"
},
然后,我可以使用 process.env.NODE_ENV
在 Webpack 中获取环境。
当然,我可以通过 NODE_ENV
和 --mode
,但我希望避免重复。
试试这个
package.json
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production --env.production"
}
所以如果你在 webpack config
中使用 env
,它看起来像这样
module.exports = env => {
const inProduction = env.production
return {
entry: {...},
output: {...},
module: {...}
}
}
有关设置 webpack.config.js
的更多详细信息。 (Environment Variables for webpack 4)
您想避免重复传递给脚本的选项。
导出函数时,将使用 2 个参数调用该函数:环境 env
作为第一个参数 和选项映射 argv
作为第二个参数。
package.json
"scripts": {
"build-dev": "webpack --mode development",
"build-prod": "webpack --mode production"
},
webpack.config.js
module.exports = (env, argv) => {
console.log(`This is the Webpack 4 'mode': ${argv.mode}`);
return {
...
};
}
这些是结果:
对于npm run build-dev
:
> webpack --mode development
This is the Webpack 4 'mode': development
Hash: 554dd20dff08600ad09b
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:27:35
对于npm run build-prod
:
> webpack --mode production
This is the Webpack 4 'mode': production
Hash: 8cc6c4e6b736eaa4183e
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:28:32
我最终 (ab) 使用 npm_lifecycle_script
在 DefinePlugin
中设置模式:
MODE: JSON.stringify(process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length, process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length).search(/($|\s)/)))
这从发出的 webpack
命令中获取 --mode
参数的值。
为了测试是否处于生产模式,在 webpack.config.js
文件中我使用了这个:
const isProduction = process.argv[process.argv.indexOf('--mode') + 1] === 'production';
const config = {
...
};
if (isProduction) {
config.plugins.push(new MiniCssExtractPlugin());
} else { // isDev
config.devtool = /*'source-map'*/ 'inline-source-map';
}
module.exports = config;
停止尝试 NODE_ENV
,是老派(webpack 3)。
这更兼容 import / webpack resolver
如何在webpack.config.js中获取package.json中指定的当前--mode
? (例如,用于推送一些插件。)
package.json
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
我在 Webpack 3 中做了什么:
package.json
"scripts": {
"build": "cross-env NODE_ENV=development webpack",
"prod": "cross-env NODE_ENV=production webpack"
},
然后,我可以使用 process.env.NODE_ENV
在 Webpack 中获取环境。
当然,我可以通过 NODE_ENV
和 --mode
,但我希望避免重复。
试试这个
package.json
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production --env.production"
}
所以如果你在 webpack config
中使用 env
,它看起来像这样
module.exports = env => {
const inProduction = env.production
return {
entry: {...},
output: {...},
module: {...}
}
}
有关设置 webpack.config.js
的更多详细信息。 (Environment Variables for webpack 4)
您想避免重复传递给脚本的选项。
导出函数时,将使用 2 个参数调用该函数:环境 env
作为第一个参数 和选项映射 argv
作为第二个参数。
package.json
"scripts": {
"build-dev": "webpack --mode development",
"build-prod": "webpack --mode production"
},
webpack.config.js
module.exports = (env, argv) => {
console.log(`This is the Webpack 4 'mode': ${argv.mode}`);
return {
...
};
}
这些是结果:
对于npm run build-dev
:
> webpack --mode development
This is the Webpack 4 'mode': development
Hash: 554dd20dff08600ad09b
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:27:35
对于npm run build-prod
:
> webpack --mode production
This is the Webpack 4 'mode': production
Hash: 8cc6c4e6b736eaa4183e
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:28:32
我最终 (ab) 使用 npm_lifecycle_script
在 DefinePlugin
中设置模式:
MODE: JSON.stringify(process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length, process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length).search(/($|\s)/)))
这从发出的 webpack
命令中获取 --mode
参数的值。
为了测试是否处于生产模式,在 webpack.config.js
文件中我使用了这个:
const isProduction = process.argv[process.argv.indexOf('--mode') + 1] === 'production';
const config = {
...
};
if (isProduction) {
config.plugins.push(new MiniCssExtractPlugin());
} else { // isDev
config.devtool = /*'source-map'*/ 'inline-source-map';
}
module.exports = config;
停止尝试 NODE_ENV
,是老派(webpack 3)。
这更兼容 import / webpack resolver