webpack-merge 配置抽離

前置

如果你曾使用 webpack 構建應用，就會知道如果把所有配置都寫在 webpack.config.js 中那將是災難。正如你所見，我現在使用的這套博客園皮膚是使用 gulp 構建的，如果你不熟悉 gulp, 那你肯定熟悉 webpack. 下面將介紹我使用這兩個工具是如何抽離配置的，先從 webpack 開始.

webpack

原因

webpack 默認的 webpack.config.js 長這樣:

module.exports = {
  entry: {},
  output: {},
  module: {}
  //...
}

這里最讓人頭疼的就是 module 內的層層嵌套。例如，我稍稍處理 css 和 js 就會像下面這樣:

 module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        },
                    },
                    'postcss-loader',
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                        },
                    },
                    {
                        loader: 'eslint-loader',
                        options: {
                            cache: true,
                        },
                    },
                ],
            },
        ],
    },

如果再去區分生產環境和開發環境可能看起來更加混亂。好一點的做法是，抽離不同環境的 module 或者其他配置，根據環境來決定最終導出的項。但是無法改變的是這些東西都存在一個 webpack.config.js 文件中。如果應用程序需要使用大量的 loader, 會顯得文件又長又混亂，需要修改一些配置時容易出錯。尋找和出錯都會浪費時間.

webpack-merge

npm i -D webpack-merge
Webpack-merge 提供了一個函數，該函數將數組串聯並合並創建新對象的對象。如果遇到函數，它將執行它們，通過算法運行結果，然后再次將返回的值包裝在函數中。

語法

// 默認的方式
const output = merge (object1, object2, object3, ...);

// 數組對象
// 這適用於所有可用的功能。
const output = merge ([object1, object2, object3]);

// 右邊優先
const output = merge (
  { fruit: "apple", color: "red" },
  { fruit: "strawberries" }
);

一般使用默認的方式就夠了，深入了解 Webpack-merge. 接下來不在使用 webpack.config.js, 在項目根目錄新建 config 文件夾。文件夾下新建:

• webpack.base.js 公共的配置
• webpack.dev.js 開發環境配置
• webpack.prod.js 生產環境配置

webpack.base.js

const path = require ("path")

module.exports = {
  entry: {
    // 這里是多入口
    index: "./src/main.js",
    reacg: "./src/themes/reacg/index.js"
    //...
  },
  output: {
    filename: "[name].min.js",
    path: path.join (__dirname, "..", "dist")
  },
  resolve: {
    alias: {
      "@": path.resolve ("src")
    }
  }
}

這里需要注意的一點是 output.path 需要處理一下路徑.path.join (__dirname,"..","dist"), 這樣就能夠和原來一樣將打包得到的 dist 目錄輸出到根目錄.
這句代碼的意思是獲取當前絕對路徑的上一層路徑，就是項目的根目錄了。另外的 webpack.dev.js 和 webpack.prod.js 根據項目需要分別配置就可以了。這樣如果再去添加或修改一些配置就能一目了然了。最后還需要更改一下 package.json 中的 script:

"scripts": {
    "start": "webpack-dev-server --config config/webpack.dev.js",
    "build": "webpack --config config/webpack.prod.js"
},

• npm start 在本地啟動
• npm run build 打包項目

另外，如果你有興趣，這里有一個使用 webpack 構建的 DEMO 供你參考:

gulp

如果你使用 gulp 構建應用，抽離它的配置就相當簡單了。正常情況下，根目錄下有一個 gulpfile.js 文件，在這里做一些配置。最后通過 exports 導出配置，通過 gulp 命令或者自定義命令來運行 task (任務). 要將不同環境的配置分開寫只需要將 gulpfile.js 文件換成同名的文件夾並新建:

• index.js 必須，被當作 gulpfile.js 使用
• options.js 一些常量
• gulp.dev.js 開發環境配置
• gulp.prod.js 生產環境配置

除了必須的 index 之外可以隨意擴展。如果需要使用 npm 來代替 gulp 命令，只需要在 package.json 中的 script 中定義.

如果你有興趣，這里同樣有一個使用 gulp 構建的 DEMO 供你參考: