webpack 区分环境

区分环境 {ignore}

文章目录

  • [区分环境 {ignore}](#区分环境 {ignore})

有些时候,我们需要针对生产环境和开发环境分别书写webpack配置

为了更好的适应这种要求,webpack允许配置不仅可以是一个对象,还可以是一个函数

js 复制代码
module.exports = env => {
    return {
        //配置内容
    }
}

在开始构建时,webpack如果发现配置是一个函数,会调用该函数,将函数返回的对象作为配置内容,因此,开发者可以根据不同的环境返回不同的对象

在调用webpack函数时,webpack会向函数传入一个参数env,该参数的值来自于webpack命令中给env指定的值,例如

shell 复制代码
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}

这样一来,我们就可以在命令中指定环境,在代码中进行判断,根据环境返回不同的配置结果。

javascript 复制代码
var baseConfig = require("./webpack.base")
var devConfig = require("./webpack.dev")
var proConfig = require("./webpack.pro")
const { merge } = require('webpack-merge');
module.exports = function (env) {
    if (env && env.prod) {
        return {...baseConfig,...proConfig} // 这种方式只会复制对象的可枚举属性,并且不会执行getter setter,如果配置很简单的话,这种方式也可以
        return merge(baseConfig, proConfig); // 推荐
    }
    else {
        return {
            ...baseConfig,
            ...devConfig
        }
    }
}
相关推荐
百思可瑞教育3 天前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
歪歪1003 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪1003 天前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
谢尔登3 天前
【Webpack】模块联邦
前端·webpack·node.js
Yvonne爱编码5 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
会有钱的-_-6 天前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
xiaopengbc6 天前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
ningmengjing_7 天前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner20007 天前
Webpack开发:从入门到精通
前端·webpack·node.js
passer9818 天前
基于webpack的场景解决
前端·webpack