我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中,我使用gulp预处理来替换html页面中的一些变量(例如数据库名称),这取决于NODE_ENV。用webpack实现类似结果的最佳方法是什么?
当前回答
因为我在上面的帖子上的编辑没有被批准,所以发布了额外的信息。
如果你想从包装中挑选价值。类似于定义的版本号,并通过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)
})
]
感谢罗斯·艾伦
其他回答
我的webpack版本“webpack”:“^4.29.6”的变通方法非常简单。
//package.json
{
...
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development"
},
}
你可以在webpack命令中传递——mode参数,然后在webpack.config.js中
// webpack.config.json
module.exports = (env,argv) => {
return {
...
externals: {
// global app config object
config: JSON.stringify({
apiUrl: (argv.mode==="production") ? '/api' : 'localhost:3002/api'
})
}
}
我在代码中像这样使用baseurl
// my api service
import config from 'config';
console.log(config.apiUrl) // like fetch(`${config.apiUrl}/users/user-login`)
我发现下面的解决方案是最容易为Webpack 2设置环境变量:
例如,我们有一个webpack设置:
var webpack = require('webpack')
let webpackConfig = (env) => { // Passing envirmonment through
// function is important here
return {
entry: {
// entries
},
output: {
// outputs
},
plugins: [
// plugins
],
module: {
// modules
},
resolve: {
// resolves
}
}
};
module.exports = webpackConfig;
在Webpack中添加环境变量:
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
]
定义插件变量并将其添加到插件中:
new webpack.DefinePlugin({
'NODE_ENV': JSON.stringify(env.NODE_ENV || 'development')
}),
现在当运行webpack命令时,传递env。NODE_ENV作为参数:
webpack --env.NODE_ENV=development
// OR
webpack --env.NODE_ENV development
现在您可以在代码中的任何地方访问NODE_ENV变量。
再给这些问题补充一个答案:
使用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文档。链接
这里有一种方法,对我来说是有效的,并允许我通过重用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
}),
你可以直接使用webpack中的EnvironmentPlugin来在编译过程中访问任何环境变量。
你只需要在webpack.config.js文件中声明这个插件:
var webpack = require('webpack');
module.exports = {
/* ... */
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV'])
]
};
注意,必须显式声明要使用的环境变量的名称。