我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中，我使用gulp预处理来替换html页面中的一些变量(例如数据库名称)，这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?
当前回答
你可以使用——env传递环境变量，而不需要额外的插件
Webpack -
webpack --config webpack.config.js --env.foo=bar
Webpack 5+（无）
webpack --config webpack.config.js --env foo=bar
然后，使用webpack.config.js中的变量:
module.exports = function(env) {
if (env.foo === 'bar') {
// do something
}
}
进一步阅读:Webpack 2.0不支持自定义命令行参数? # 2254
其他回答
再给这些问题补充一个答案:
使用ExtendedDefinePlugin而不是DefinePlugin
npm install extended-define-webpack-plugin --save-dev.
ExtendedDefinePlugin使用起来更简单，并且有文档:-) 链接
因为DefinePlugin缺乏良好的文档，我想通过说它实际上像c#中的#DEFINE一样工作来帮助解决问题。
#if (DEBUG)
Console.WriteLine("Debugging is enabled.");
#endif
因此，如果你想了解DefinePlugin是如何工作的，请阅读c# #define文档。链接
你可以直接使用webpack中的EnvironmentPlugin来在编译过程中访问任何环境变量。
你只需要在webpack.config.js文件中声明这个插件:
var webpack = require('webpack');
module.exports = {
/* ... */
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV'])
]
};
注意，必须显式声明要使用的环境变量的名称。
有两种基本方法可以实现这一点。
DefinePlugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
注意，这将只是替换匹配的“原样”。这就是为什么字符串是这样的格式。你可以有一个更复杂的结构，比如一个物体但你懂的。
EnvironmentPlugin
new webpack.EnvironmentPlugin(['NODE_ENV'])
EnvironmentPlugin在内部使用DefinePlugin并通过它将环境值映射到代码。含混的语法。
别名
或者，您可以通过别名模块使用配置。从消费者的角度来看，它是这样的:
var config = require('config');
配置本身可能是这样的:
resolve: {
alias: {
config: path.join(__dirname, 'config', process.env.NODE_ENV)
}
}
我们写入process。env。NODE_ENV是开发。然后它会映射到。/config/development.js。它映射到的模块可以像这样导出配置:
module.exports = {
testing: 'something',
...
};
只是另一个选项，如果你只想使用cli界面，只需使用webpack的define选项。我在包中添加了以下脚本。json:
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
我只需要运行npm运行build-production。
这里有一种方法，对我来说是有效的，并允许我通过重用json文件保持我的环境变量DRY。
const webpack = require('webpack');
let config = require('./settings.json');
if (__PROD__) {
config = require('./settings-prod.json');
}
const envVars = {};
Object.keys(config).forEach((key) => {
envVars[key] = JSON.stringify(config[key]);
});
new webpack.DefinePlugin({
'process.env': envVars
}),
