1. 简介

其实我么之前已经将webpack.config.js 按环境进行去了区分配置，那么在公共配置文件中我们能否知道当前所处的环境，并据此做逻辑区分呢？

2. env

对于 webpack.config.js 来讲，除了导出一个对象以外，其实还可以导出一个函数。

// webpack.common.js
const path = require('path');
const devConfig = require('./webpack.dev');
const prodConfig = require('./webpack.prod');
const merge = require('webpack-merge');

const commonConfig = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: "[name].bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        limit: 2048
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff)$/,
                use: 'file-loader'
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

module.exports = (env, argv) => {
    console.log('===', env, argv);
    if (env && env.production) {
        return merge(commonConfig, prodConfig);
    }
    return merge(commonConfig, devConfig);
};

// webpack.dev.js
var path = require('path');

var devConfig = {
    mode: 'development',
    devtool: "cheap-module-eval-source-map",
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        open: true,
        port: 3000,
    },
};
module.exports = devConfig;

// webpack.prod.js

var prodConfig = {
    mode: 'production',
    devtool: "cheap-module-source-map"
};

module.exports = prodConfig;

"dev": "webpack --config ./build/webpack.common.js --watch",

运行 npm run dev,会发现：

image.png

现在 env 是空的，argv 是我们的一些运行参数。我们现在手动传入 env：

"dev": "webpack --env.development --config ./build/webpack.common.js --watch",

image.png

发现此时 env 是我们在脚本指定的值，并且同时该属性也保存到了 argv。这样我们就可以根据环境做区分打包了：

"dev": "webpack --env.development --config ./build/webpack.common.js --watch",
"build": "webpack --env.production --config ./build/webpack.common.js"

3. process.env.NODE_ENV

对于配置文件，我们可以使用 env，那么在源码当中，我们是否可以利用环境变量呢？可以看 mode

image.png

// index.js

console.log('-----', process.env.NODE_ENV);

打包如下：

image.png

我们就可以在源码中根据这个变量来进行环境的区分。这里涉及到 DefinePlugin 插件，这个插件可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，无需作任何声明。

4. 小结

合理利用环境变量，能帮助我们简化逻辑。但要防止滥用，能通过配置文件单独区分配置的还是尽量写在配置文件，方便维护。

参考

webpack4系列教程（九）：开发环境和生产环境
https://webpack.js.org/configuration/mode/#mode-development
NODE_ENV和webpack
理解webpack之process.env.NODE_ENV详解(十八)
Webpack DefinePlugin And ProvidePlugin