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

￡神魔★判官ぃ 2022-04-05 11:26 304阅读 0赞

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]  
继上一次分离生产模式和开发模式的配置: [https://blog.csdn.net/qq593249106/article/details/84964816][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，查看输出：  
![在这里插入图片描述][2018121211582544.png]  
成功输出了 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 都没问题

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84964816]: https://blog.csdn.net/qq593249106/article/details/84964816
[2018121211582544.png]: /images/20220405/98bc8146f4cd4713ac2ba5f97b06525f.png