我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中,我使用gulp预处理来替换html页面中的一些变量(例如数据库名称),这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?
当前回答
我更喜欢使用。env文件不同的环境。
使用webpack.dev.config将env.dev复制到。env到根文件夹 使用webpack.prod.config复制env。刺激到。env
在代码中
use
要求(dotenv) . config (); const API = process.env.API ##,它将存储.env文件中的值
其他回答
从Webpack v4开始,在Webpack配置中简单地设置模式就可以为你设置NODE_ENV(通过DefinePlugin)。文档。
因为我在上面的帖子上的编辑没有被批准,所以发布了额外的信息。
如果你想从包装中挑选价值。类似于定义的版本号,并通过Javascript中的DefinePlugin访问它。
{"version": "0.0.1"}
然后,导入包。Json在各自的webpack中。config,使用import变量访问该属性,然后在DefinePlugin中使用该属性。
const PACKAGE = require('../package.json');
const _version = PACKAGE.version;//Picks the version number from package.json
例如,webpack上的某些配置。config为DefinePlugin使用元数据:
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
host: HOST,
port: PORT,
ENV: ENV,
HMR: HMR,
RELEASE_VERSION:_version//Version attribute retrieved from package.json
});
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'process.env': {
'ENV': JSON.stringify(METADATA.ENV),
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'VERSION': JSON.stringify(METADATA.RELEASE_VERSION)//Setting it for the Scripts usage.
}
}),
在任何typescript文件中访问它:
this.versionNumber = process.env.VERSION;
最聪明的方法是这样的:
// webpack.config.js
plugins: [
new webpack.DefinePlugin({
VERSION: JSON.stringify(require("./package.json").version)
})
]
感谢罗斯·艾伦
只是另一个选项,如果你只想使用cli界面,只需使用webpack的define选项。我在包中添加了以下脚本。json:
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
我只需要运行npm运行build-production。
我研究了几个关于如何设置特定于环境的变量的选项,最后得到了这样的结果:
我目前有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。
你可以使用——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