我正在尝试将一个angular应用程序从gulp转换为webpack。在gulp中,我使用gulp预处理来替换html页面中的一些变量(例如数据库名称),这取决于NODE_ENV。用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
}),
其他回答
再给这些问题补充一个答案:
使用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 v4开始,在Webpack配置中简单地设置模式就可以为你设置NODE_ENV(通过DefinePlugin)。文档。
现在2020年,我也面临着同样的问题,但是对于这个老问题,有很多新的答案,就列举一些吧:
这是webpack.config.js
plugins: [
new HtmlWebpackPlugin({
// 1. title is the parameter, you can use in ejs template
templateParameters:{
title: JSON.stringify(someting: 'something'),
},
}),
//2. BUILT_AT is a parameter too. can use it.
new webpack.DefinePlugin({
BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now,"some"),
}),
//3. for webpack5, you can use global variable: __webpack_hash__
//new webpack.ExtendedAPIPlugin()
],
//4. this is not variable, this is module, so use 'import tt' to use it.
externals: {
'ex_title': JSON.stringify({
tt: 'eitentitle',
})
},
这4种方法只是基本的,我相信还有更多的方法。但我认为这是最简单的方法。
这是另一个类似于@zer0chain的答案的答案。但是,有一个区别。
设置webpack -p就足够了。
即:
--define process.env.NODE_ENV="production"
这就等于
// webpack.config.js
const webpack = require('webpack');
module.exports = {
//...
plugins:[
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
所以你可能只需要打包这样的东西。json节点文件:
{
"name": "projectname",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"debug": "webpack -d",
"production": "webpack -p"
},
"author": "prosti",
"license": "ISC",
"dependencies": {
"webpack": "^2.2.1",
...
}
}
下面是一些来自DefinePlugin的提示:
DefinePlugin允许您创建可以在编译时配置的全局常量。这对于允许开发构建和发布构建之间的不同行为是有用的。例如,您可以使用一个全局常量来确定是否进行日志记录;也许您在开发构建中执行日志记录,但在发布构建中不执行。这就是DefinePlugin所促进的那种场景。
这样你就可以检查你是否输入webpack -help
Config options:
--config Path to the config file
[string] [default: webpack.config.js or webpackfile.js]
--env Enviroment passed to the config, when it is a function
Basic options:
--context The root directory for resolving entry point and stats
[string] [default: The current directory]
--entry The entry point [string]
--watch, -w Watch the filesystem for changes [boolean]
--debug Switch loaders to debug mode [boolean]
--devtool Enable devtool for better debugging experience (Example:
--devtool eval-cheap-module-source-map) [string]
-d shortcut for --debug --devtool eval-cheap-module-source-map
--output-pathinfo [boolean]
-p shortcut for --optimize-minimize --define
process.env.NODE_ENV="production"
[boolean]
--progress Print compilation progress in percentage [boolean]
这里有一种方法,对我来说是有效的,并允许我通过重用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
}),
推荐文章
- 将.NET DateTime转换为JSON
- SameSite警告Chrome 77
- 如何在Webpack配置中创建多个输出路径
- 在ES6 (ECMAScript 6)中是否有一种不带可变变量的循环x次的机制?
- 克隆对象没有引用javascript
- 验证字符串是否为正整数
- 如何获得一个键/值JavaScript对象的键
- 什么时候JavaScript是同步的?
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?