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

Lkkkkkkg

于 2018-12-12 11:59:09 发布

阅读量7.1k

点赞数 2

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/qq593249106/article/details/84970525

版权

本文介绍了如何在Webpack配置中通过process.env.NODE_ENV变量区分生产模式和开发模式，使用cross-env插件确保环境变量的设置，并提供了一个示例代码，展示在不同模式下如何合并和处理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo地址: https://github.com/Lkkkkkkg/webpack-demo
继上一次分离生产模式和开发模式的配置: https://blog.youkuaiyun.com/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',
                ]

最低0.47元/天解锁文章