本文介绍: 有些时候,我们需要针对生产环境和开发环境分别书写 webpack 配置。为了更好的适应这种要求, webpack 允许配置不仅可以是一个对象,还可以是一个函数。
区分环境
有些时候,我们需要针对生产环境和开发环境分别书写 webpack 配置。
为了更好的适应这种要求, webpack 允许配置不仅可以是一个对象,还可以是一个函数。
module.exports = env => {
return {
//配置内容
}
}
在开始构建时, webpack 如果发现配置是一个函数,会调用该函数,将函数返回的对象作为配置内容,因此,开发者可以根据不同的环境返回不同的对象。
在调用 webpack 函数时, webpack 会向函数传入一个参数 env ,该参数的值来自于 webpack 命令中给 env 指定的值,例如:
npx webpack --env abc # env: "abc"
npx webpack --env.abc # env: {abc:true}
npx webpack --env.abc=1 # env: {abc:1}
npx webpack --env.abc=1 --env.bcd=2 # env: {abc:1, bcd:2}
这样一来,我们就可以在命令中指定环境,在代码中进行判断,根据环境返回不同的配置结果。
webpack.pro.js :
module.exports = {
mode: "production",//生产环境
devtool: "none"
}
webpack.dev.js :
module.exports = {
mode: "development",//开发环境
devtool: "source-map"
}
webpack.base.js :
module.exports = {//提供公用配置
entry: "./src/index.js",
output: {
filename: "scripts/[name]-[hash:5].js"
}
}
webpack.config.js :
var baseConfig = require("./webpack.base");
var devConfig = require("./webpack.dev");
var proConfig = require("./webpack.pro");
module.exports = function (env) {
if (env && env.prod) {
return {
...baseConfig,
...proConfig
}
}
else {
return {
...baseConfig,
...devConfig
}
}
};
package.json :
// webpack5写法
"scripts": {
"dev": "webpack --env dev",
"prod": "webpack --env prod"
},
// webpack4写法
"scripts": {
"dev": "webpack --env.dev",
"prod": "webpack --env.prod"
},
原文地址:https://blog.csdn.net/m0_60189088/article/details/135954582
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_64465.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。