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 來區分生產模式還是開發模式了