webpack-merge

配置分離

隨着我們業務邏輯的增多，圖片、字體、css、ES6以及CSS預處理器和后處理器逐漸的加入到我們的項目中來，進而導致配置文件的增多，使得配置文件書寫起來比較繁瑣，更嚴重者（書寫特定文件的位置會出現錯誤）。更由於項目中不同的生產環境和開發環境的配置，使得配置文件變得更加糟糕。
使用單個的配置文件會影響到任務的可重用性，隨着項目需求的增長，我們必須要找到更有效地管理配置文件的方法。

管理配置文件的幾種方法:

• 在每個環境的多個文件中維護配置，並通過--config參數將webpack指向每個文件，通過模塊導入共享配置。
• 將配置文件推送到庫，然后引用庫。
• 將配置文件推送到工具。
• 維護單個配置文件的所有配置並在那里進行分支並依賴--env參數。

在本文中，主要介紹第四種文件配置的方法。

分離配置文件

我們在根目錄下創建config文件夾，並創建四個配置文件：

• webpack.comm.js 公共環境的配置文件
• webpack.development.js 開發環境下的配置文件
• webpack.production.js 生產環境下的配置文件
• webpack.parts.js 各個配置零件的配置文件

合並配置文件的工具

如果配置文件被分成了許多不同的部分，那么必須以某種方式來組合他們，通常就是合並數組和對象，webpack-merge很好的做到了這一點。

webpack-merge做了兩件事：它允許連接數組並合並對象，而不是覆蓋組合。如下所示：

const merge = require("webpack-merge"); merge( {a : [1],b:5,c:20}, {a : [2],b:10, d: 421} ) //合並后的結果 {a : [1,2] ,b :10 , c : 20, d : 421}

那么，如何合並？
1.首先將webpack-merge添加到項目中

npm install webpack-merge --save-dev

2.設置各個配置文件的連接
webpack.config.js

const commConfig = require("./config/webpack.comm"); const developmentConfig = requie("./config/webpack.development"); const productionConfig = require("./config/webpack.development") const merge = require("webpack-merge"); module.exports = mode => { if(mode === "production"){ return merge(commConfig,productionConfig,{mode}); } return merge(commConfig,developmentConfig,{mode}); } 

注：上面代碼利用mode的值來判斷是開發環境還是生產環境

webpack.comm.js

const merge = require("webpack-merge"); const parts = require("./webpack.parts") //引入配置零件文件 const config = { //書寫公共配置 } module.exports = merge([ config, parts...... ])

webpack.production.js

const merge = require("webpack-merge"); const parts = require("./webpack.parts"); //引入配置零件文件 const config = { //書寫公共配置 } modules.exports = merge([ config, parts...... ])

webpack.development.js

const merge = require("webpack-merge"); const parts = require("./webpack.parts"); //引入配置零件文件 const config = { //書寫公共配置 } modules.exports = merge([ config, parts...... ])

--env值傳參

    "dev": "webpack --env development ", "prod": "webpack --env production", "dev:server": "webpack-dev-server --env development "

使用--env允許將字符串傳遞給配置。我們來修改下package.json,使得env參數mode環境參數傳入到webpack.config.js中，就可以判斷是生產環境還是開發環境。

如何寫出可配置的webpack.parts.js
上面可以看出我們新建了一個webpack.parts.js文件，這個文件中主要是存放我們的一些配置零件。如何寫出可配置，可拔插的配置零件。就是我們這個文件的最重要的部分。
以loadCSS為例：

exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => ({ module : {  rules:[{ test : reg, include, exclude, use[{ loader : "style-loader", },{ loader : "css-loader", }].concat(uses), }] } })

上面代碼中，利用exports導出單個配置零件，通過解構賦值來傳入參數。使用數組的concat來連接外部導入的loader。參數解析：

reg:表示loader匹配的test正則，默認為css，這里可以是（less、sass、stylus）。
include:表示所要打包的文件夾。
exclude：表示要跳過打包的文件夾。
uses：外部導入的loader。

在webpack.development.js中引入

module.exports = merge([
    config,
    parts.loadCSS({
        reg : /\.less/, use : ["less-loader"] }), parts.loadCSS(), ])

總結：配置文件拆分可以是我們繼續擴展配置。最重要的收益是我們可以提取不同目標之間的共性。並且還可以識別要組合的較小配置部件，這些配置不見可以推送到自己的軟件包以跨項目使用。還可以將配置作為依賴項進行管理，而不是在多個項目中復制類似的配置。

 

歡迎關注公眾號，進一步技術交流：