我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中，我使用gulp预处理来替换html页面中的一些变量(例如数据库名称)，这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?
当前回答
我研究了几个关于如何设置特定于环境的变量的选项，最后得到了这样的结果:
我目前有2个webpack配置:
webpack.production.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production'),
'API_URL': JSON.stringify('http://localhost:8080/bands')
}
}),
webpack.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development'),
'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
}
}),
在我的代码中，我以这种(简要)方式获取API_URL的值:
统一文件格式
编辑2016年11月3日
Webpack文档有一个例子:https://webpack.js.org/plugins/define-plugin/#usage
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
使用ESLint，如果你有no-undef规则，你需要在代码中明确地允许未定义的变量。http://eslint.org/docs/rules/no-undef像这样:
/*global TWO*/
console.log('Running App version ' + TWO);
EDIT 2017年9月7日(Create-React-App特定)
如果您不喜欢配置太多，请查看Create-React-App: Create-React-App -添加自定义环境变量。实际上CRA使用Webpack。
其他回答
我研究了几个关于如何设置特定于环境的变量的选项，最后得到了这样的结果:
我目前有2个webpack配置:
webpack.production.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production'),
'API_URL': JSON.stringify('http://localhost:8080/bands')
}
}),
webpack.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development'),
'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
}
}),
在我的代码中，我以这种(简要)方式获取API_URL的值:
统一文件格式
编辑2016年11月3日
Webpack文档有一个例子:https://webpack.js.org/plugins/define-plugin/#usage
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
使用ESLint，如果你有no-undef规则，你需要在代码中明确地允许未定义的变量。http://eslint.org/docs/rules/no-undef像这样:
/*global TWO*/
console.log('Running App version ' + TWO);
EDIT 2017年9月7日(Create-React-App特定)
如果您不喜欢配置太多，请查看Create-React-App: Create-React-App -添加自定义环境变量。实际上CRA使用Webpack。
这里有一种方法，对我来说是有效的，并允许我通过重用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
}),
只是另一个选项，如果你只想使用cli界面，只需使用webpack的define选项。我在包中添加了以下脚本。json:
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
我只需要运行npm运行build-production。
就我个人而言，我更喜欢以下这些答案:
const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
process: {
env: {
NODE_ENV: prod? `"production"`: '"development"'
}
}
}),
...
]
};
使用它不会有奇怪的env变量或跨平台问题(使用env变量)。你所要做的就是分别为开发或生产运行普通的webpack或webpack -p。
参考:Github问题
有两种基本方法可以实现这一点。
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',
...
};
