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 供你參考: