1.使用 cli 设置环境变量

在 webpack 配置文件中可以直接导出一个配置对象。

还可以导出一个函数，在函数中返回一个配置对象。并且函数可以接收一个 env 参数，我们可以在启动 webpack 时，在 cli 命令中传递变量，而 env 属性可以接收到传递的变量。

// 可以在 env 变量中获取 name 变量的值
npx webpack --env name=zhenYuFeng

// 如果只声明了变量未赋值, 那么它的值就是 true
npx webpack --env production

那么我们可以根据传递进来的变量，分别设置 开发环境 和 生产环境 的配置。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env) => {
    // 生产环境
    const config = {
        mode: "production",
        entry: './src/main.js',
        output: {
            filename: 'index.js',
            path: path.resolve(__dirname, 'dist'),
        },
        module: {
            rules: [
                {
                    test: /.css$/i,
                    // 在生产环境中, 将Css单独提取出来
                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
                },
            ],
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'static/css/[name].css',
            }),
        ],
    };

    // 判断当前是否为 开发环境
    if (env.development) {
        config.mode = "development";

        // 将 css 不单独提取出来, 而是挂载到 style 标签, 这样更快
        config.module.rules[0].use[0] = 'style-loader';
        delete config.plugins[0];
    }

    return config;
};

接下来可以直接在 package.json 中进行配置命令启动即可。

2.创建多环境配置文件

我们可以创建 公共、开发、生产 三个配置文件，最后在根据命令来指定运行哪个环境的配置文件。

在此之前我们需要安装一个合并工具，在开发和生产中，由此工具来合并公共配置对象。

npm install --save-dev webpack-merge

然后我们在 config 文件夹下，新建关于这三个的配置文件。

公共配置：webpack.common.js
开发环境：webpack.dev.js
生产环境：webpack.prod.js

我们首先在公共配置中进行编写，该文件直接导出该配置对象。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'static/js/[name].js',
        path: path.resolve(__dirname, '../dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /.(png|jpe?g|gif|webp)$/i,
                type: 'asset',
                generator: {
                    filename: 'static/images/[name][ext]',
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack App',
            template: './src/index.html',
            inject: 'body',
        }),
    ],
};

然后在 webpack.dev.js 和 webpack.prod.js 配置文件中，都需要引入 webpack.common.js 和 webpack-merge。

// webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'development'
});

// webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'production'
});

这样我们就可以区分环境，从而实现不同环境的配置了。在生产环境我们更注重代码的压缩，在开发环境更注重开发效率的配置。

我们可以通过配置 npm 脚本，或者使用 npx 命令去启动。

// 打包:开发环境
npx webpack --config ./config/webpack.dev.js
// 打包:生产环境
npx webpack --config ./config/webpack.prod.js

// 在线运行: 开发环境
npx webpack serve --config ./config/webpack.dev.js

"scripts": {
    "build:dev": "webpack --config ./config/webpack.dev.js",
    "build:prod": "webpack --config ./config/webpack.prod.js",
    "start:dev": "webpack serve --config ./config/webpack.dev.js",
    "start:prod": "webpack serve --config ./config/webpack.prod.js"
},