webpack學習進階（二）

在上篇文章中，咱們瞭解了一些webpack的基礎配置，接下來咱們來進一步瞭解webpack的高級使用。

配置分離

隨着咱們業務邏輯的增多，圖片、字體、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(),
])

總結：配置文件拆分能夠是咱們繼續擴展配置。最重要的收益是咱們能夠提取不一樣目標之間的共性。而且還能夠識別要組合的較小配置部件，這些配置不見能夠推送到本身的軟件包以跨項目使用。還能夠將配置做爲依賴項進行管理，而不是在多個項目中複製相似的配置。