前端工程化之：webpack1-10(区分环境)

最新推荐文章于 2024-04-14 17:34:14 发布

猛扇赵四那半好嘴

最新推荐文章于 2024-04-14 17:34:14 发布

阅读量528

点赞数 12

分类专栏：前端工程化文章标签：前端 webpack node.js

本文链接：https://blog.csdn.net/m0_60189088/article/details/135954582

版权

前端工程化专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文介绍了如何在Webpack中使用函数式配置，根据env参数区分生产环境和开发环境，实现灵活的配置管理。通过示例展示了如何根据传入的env值动态加载不同环境的配置文件。

摘要由CSDN通过智能技术生成

区分环境

有些时候，我们需要针对生产环境和开发环境分别书写 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"
},