0
点赞
收藏
分享

微信扫一扫

Day 31 | 贪心算法 理论基础 、455.分发饼干 、 376. 摆动序列 、 53. 最大子序和

ixiaoyang8 2024-02-02 阅读 8

区分环境

module.exports = env => {
    return {
        //配置内容
    }
}

在调用 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"
},
举报

相关推荐

0 条评论