webpack学习（十七）：使用 process.env.NODE_ENV 区别生产模式和开发模式

demo地址: https://github.com/Lkkkkkkg/webpack-demo
继上一次分离生产模式和开发模式的配置: https://blog.csdn.net/qq593249106/article/details/84964816

合并代码

之前因为开发模式不需要压缩 css，将不同的压缩 rule 分别写在 webpack.prod.js 和 webpack.dev.js 文件里：
webpack.prod.js

rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
                use: [
                    MiniCssExtractPlugin.loader, //生产模式使用分离代码插件
                    'css-loader',
                    'sass-loader',
                ]
            }
        ]

webpack.dev.js

rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
                use: [
                    'style-loader', //开发模式不使用插件
                    'css-loader',
                    'sass-loader',
                ]
            }
        ]

现在将这两个代码提取到 webpack.common.js，并用 process.env.NODE_ENV 变量来区分是当前是生产模式还是开发模式

使用cross-env

因为 defindPlugin 这种用法：

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
})

无法在 webpack 的配置文件中获取到 process.env.NODE_ENV，它是暴露给 src 文件夹下的文件，如 index.js 就可以获取到 process.env.NODE_ENV 的值为 production
所以这里要用到 cross-env 插件

安装

npm install cross-env --save-dev

使用

在 NPM 脚本加上：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --progress  --config ./config/webpack.prod.js",
    "dev": "webpack-dev-server --open --hot --progress --config ./config/webpack.dev.js"
  },

测试

在 webpack.common.js 加上：

console.log(process.env.NODE_ENV);

输入 npm run build，查看输出：

成功输出了 production，这样就可以用 process.env.NODE_ENV 来区分生产模式还是开发模式了
合并一下代码：
webpack.common.js

module.exports = {
    mode: process.env.NODE_ENV ? 'production' : 'development',
 module: {
    rules: [ //公共配置加载器
        {
            test: /\.(sa|sc|c)ss$/,
            include: path.resolve(__dirname, "../src"), //include代表需要进行 loader 的目录
            use: [
                process.env.NODE_ENV ? MiniCssExtractPlugin.loader : 'style-loader', //生产模式使用分离代码插件, 开发模式不使用
                'css-loader',
                'sass-loader',
            ]
        }
    ]
}
}

测试

运行 npm run build，和 npm run dev 都没问题