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
        }
    }
}
相关推荐
teeeeeeemo14 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
小小前端_我自坚强2 天前
2025Webpack、Vite、Rollup详解
webpack·vite·rollup.js
大鱼前端2 天前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
颜酱2 天前
用搬家公司的例子来入门webpack
前端·javascript·webpack
前端缘梦3 天前
Webpack 5 核心升级指南:从配置优化到性能提升的完整实践
前端·面试·webpack
时间的情敌3 天前
对Webpack的深度解析
前端·webpack·node.js
天蓝色的鱼鱼3 天前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
西洼工作室4 天前
Vue CLI为何不显示webpack配置
前端·vue.js·webpack
富贵2号5 天前
从零开始理解 Webpack:构建现代前端工程的基石
webpack
Hashan8 天前
告别混乱开发!多页面前端工程化完整方案(Webpack 配置 + 热更新)
webpack