摘要：另外備注一部分參數(shù)的說(shuō)明折疊有助于文檔樹(shù)中文本節(jié)點(diǎn)的空白區(qū)域?qū)M(jìn)行壓縮默認(rèn)默認(rèn)按照不同文件的依賴關(guān)系來(lái)排序。敲黑板講重點(diǎn)的當(dāng)然目前這部分的文檔在官網(wǎng)還不是很全，所以這里我們參考了印記中文的說(shuō)明文檔，指優(yōu)化模塊。

鏈接

寫在前面

為什么要自己手寫一個(gè)腳手架？

如何去思考遇到的問(wèn)題？

正文

原文鏈接

github

whale-vue

1、為什么要自己手寫一個(gè)腳手架？

在寫這個(gè)腳手架之前我也深深的問(wèn)過(guò)自己，在我工作的項(xiàng)目中需要去重新寫一個(gè)腳手架嗎？或者說(shuō)有那么多已經(jīng)寫好的腳手架為何不采用？

事情的經(jīng)過(guò)是這樣的，在很早很早以前，我嘗試使用過(guò)VUE-CLI 2進(jìn)行過(guò)項(xiàng)目開(kāi)發(fā)，當(dāng)時(shí)并不怎么熟悉webpack以及一些打包編譯的相關(guān)知識(shí)，隨著頁(yè)面的增加！項(xiàng)目的體積的增大，導(dǎo)致整體build出來(lái)的包非常之大，公共文件也會(huì)隨之增大，加載速度也會(huì)隨之降低。后續(xù)的結(jié)果我就不做闡述了！

那么！后來(lái)... vue-Cli 3.0誕生了，首次使用簡(jiǎn)直是個(gè)救世的主，無(wú)論從速度還是編譯過(guò)程體驗(yàn)都非常好，而且還可以通過(guò)vue.config.js自定義很多的配置，基本上完全可以自定義了，當(dāng)然！也是隨著頁(yè)面的不斷增加核項(xiàng)目的增大，在這個(gè)時(shí)候。我開(kāi)始發(fā)現(xiàn)我自己對(duì)于webpack或者說(shuō)打包編譯的相關(guān)知識(shí)已經(jīng)不能支撐我繼續(xù)自定義的開(kāi)發(fā)下去了。發(fā)現(xiàn)了一些潛在的問(wèn)題，但是并沒(méi)有實(shí)際的解決思路的時(shí)候，就可以追述到一些基礎(chǔ)知識(shí)的欠缺。

隨著項(xiàng)目的逐漸增大，尤其是多頁(yè)應(yīng)用的支持以及一些文件模塊化的拆分，包括一些tree-shaking的運(yùn)用。盡管vue-cli3.0支持configureWebpack 這樣強(qiáng)大的API。但是仔細(xì)想想，要想從事情的本質(zhì)或根本上解決問(wèn)題，首先自身要相對(duì)的熟悉，并在此基礎(chǔ)之上運(yùn)用和操作，得以充分的發(fā)揮；所以還是決定自己去了解以便更好的開(kāi)發(fā)。

2、如何去思考遇到的問(wèn)題？

在項(xiàng)目的開(kāi)發(fā)中，尤其是在寫腳手架這種工具性的東西的時(shí)候，需要考慮到的場(chǎng)景和實(shí)際運(yùn)用的時(shí)候，更多的是不能沉浸在自己的思維之中，參考并學(xué)習(xí)別人的經(jīng)驗(yàn)是有必要的，從而得出一套符合自己的思路。

從最開(kāi)始的目錄結(jié)構(gòu)，以及模塊化的一些思考，如何更好的做到性能的優(yōu)化等等，都是值得思考的問(wèn)題所在，如何處理好自己的業(yè)務(wù)邏輯，針對(duì)不同的項(xiàng)目以及兼容性的考慮等等。

在此之前我們需要對(duì)webpack4的一些文檔或者API進(jìn)行充分的了解，可以參考官方文檔或者參考印記中文的webpack文檔,但是針對(duì)于webpack4的文檔本來(lái)介紹的不是很全面，在很多的API上面還是之前的介紹，所以，有很多小伙伴在看文檔的時(shí)候發(fā)現(xiàn)并不能正常的進(jìn)行操作，這時(shí)候可以結(jié)合兩個(gè)不同版本的文檔進(jìn)行研究，當(dāng)然時(shí)間的消耗成本也是比較高的。

3、一些基本的構(gòu)建思路！

在此之前我將控制業(yè)務(wù)邏輯的代碼進(jìn)行分離，腳手架是多帶帶存在的。兩者目錄結(jié)構(gòu)相互獨(dú)立，業(yè)務(wù)邏輯的代碼永遠(yuǎn)不會(huì)干涉到腳手架的

對(duì)于一些最基礎(chǔ)的配置我就不一一講述了：

webpack.config.js

module.exports = {
    mode:"development",
    entry: "./***.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },
    module:{
        //...
    },
    plugins:[
        //...
    ]
};

以上是一些基本的配置方式，當(dāng)然我們可以通過(guò)package.json文件中的scripts選項(xiàng)自定義一些基于命令行的配置：

package.josn

 "scripts": {
    "dev": "APP_ENV=dev webpack-dev-server --config core/dev.js",
    "prd": "APP_ENV=build webpack --config core/build.js",
    "build": "APP_ENV=build webpack --config core/build.js",
    "lint": "eslint --fix */*.vue *.js",
    "test:whale": "jest tests/*.js && npm run build"
  },

以上的一些配置僅供參考，分別可以通過(guò)npm run dev | npm run prd | ...來(lái)進(jìn)行相關(guān)的操作。關(guān)于更多的npm script 詳細(xì)參考

4、node_modules的一些介紹

關(guān)于node_modules這塊其實(shí)非常的龐大，這也是npm的一個(gè)巨大的社區(qū)。與其說(shuō)是學(xué)習(xí)，不如說(shuō)是抽一部分優(yōu)秀的包來(lái)使用，要知道一個(gè)node_modules包是在做什么事情，可以通過(guò)npm搜索包進(jìn)行瀏覽其詳細(xì)介紹，在對(duì)應(yīng)的github地址進(jìn)行相應(yīng)的了解。

關(guān)于如何學(xué)習(xí)node_modules包并不在我的介紹范圍內(nèi)，但是我會(huì)介紹一些常用的一些比較好用的包進(jìn)行分享。而且在構(gòu)建腳手架之前，必須要對(duì)很多的包進(jìn)行相關(guān)的學(xué)習(xí)，不需要知道每個(gè)包的源碼是什么，但是至少需要知道一些包的作用和用法，比如.vue文件需要使用vue-loader進(jìn)行解析，使用到一些語(yǔ)法校驗(yàn)的時(shí)候需要用到eslint,基于webpack進(jìn)行生成html頁(yè)面的時(shí)候需要用到html-webpack-plugin;ES6轉(zhuǎn)ES5需要用到一系列的@babel/xxx插件，等等..

我這里不做一一的介紹，但是會(huì)在后續(xù)用到每一個(gè)包的時(shí)候做相對(duì)的介紹即可。

多入口的輸入相對(duì)比較簡(jiǎn)單，可以直接參考官方文檔
當(dāng)然entry可以接受一個(gè)對(duì)象進(jìn)行多頁(yè)面的輸入，如果只是起步階段建議使用一個(gè)入口文件進(jìn)行編寫，例：

module.exports = {
    entry: index:"xxx/xxx/index.js"
}
////或
module.exports = {
    mode: isProd ? "production" : "development",
    entry: {
        index:"xxx/xxx/index.js"
    }
}

輸出可以根據(jù)自己的需要配置output參數(shù):

let path = require("path");
output: {
    filename: "./js/[name].js",
    chunkFilename: "./js/[name].js",
    path: path.resolve(__dirname, "../build/")
},

關(guān)于module | plugins | optimization | ...等模塊的配置我就不詳細(xì)的說(shuō)了，但是主要還是要說(shuō)一下各個(gè)模塊之間的配合使用。

5、module模塊的優(yōu)化

首先module.noParse是一個(gè)必備的參數(shù)，可以忽略一下大型的已經(jīng)構(gòu)建過(guò)的模塊，從而提高構(gòu)建的性能，這里放一個(gè)案例:

webpack.config.js

module:{
    noParse:/^(vue|vue-router|vuex|vuex-router-sync|lodash|echarts|axios)$/,
}

以上的案例忽略了vue | vue-router | vuex | ...等大型額已經(jīng)構(gòu)建過(guò)的模塊。（通俗易懂的說(shuō)一下，webpack在打包時(shí)會(huì)將所有用到的模塊進(jìn)行打包編譯，在這里只是忽略了重新構(gòu)建的過(guò)程，但是對(duì)于chunk的時(shí)候依然還是會(huì)在內(nèi)存堆里面使用并打包。）

6、比較復(fù)雜的module.rules

其實(shí)相對(duì)來(lái)說(shuō)，在webapck 4的module.rules還是和之前一樣的使用，針對(duì)不同的后綴的文件進(jìn)行不同的處理，在這里主要說(shuō)一下借助了happypack進(jìn)行多線程處理，當(dāng)然你也可以從npm網(wǎng)站詳細(xì)了解。與此同時(shí)我也選擇放棄使用DllPlugin | DLLReferencePlugin插件，下面我就說(shuō)一下，如何選擇？為何放棄？

我們都知道webpack在打包編譯時(shí)是單線程的運(yùn)作，但是我們的電腦已經(jīng)非常強(qiáng)大，單線程的處理，第一是隨著項(xiàng)目的增大時(shí)間會(huì)增長(zhǎng)，第二是有些空閑的cpu等硬件設(shè)備得不到充分的利用，這是有我們選擇開(kāi)啟多線程的操作，在node中是可以開(kāi)啟多線程的，只是我們借助了happypack這樣的工具來(lái)進(jìn)行多線程的控制和使用，在webpack中，我們可能需要處理到.js文件,也可能會(huì)用到.css文件，那么在打包的時(shí)候會(huì)將所有的字符匯聚到內(nèi)存中，進(jìn)行大量的密集型運(yùn)算，并提取拆分成不同的塊，這時(shí)候我們借助多線程來(lái)處理即可，使用方法如下：

首先在當(dāng)前項(xiàng)目中執(zhí)行命令行npm i happypack -D在開(kāi)發(fā)環(huán)境中安裝，引入：

const webpack = require("webpack");

例如我們?cè)偬幚?b>.js文件時(shí)候需要使用cache-loader和babel-loader時(shí)，只需要配置:

{
    test: /.js$/,
    use: ["happypack/loader?id=babel" ],
    exclude: /node_modules/
}

并在plugins選項(xiàng)中配置:

new HappyPack({
    id: "babel",
    cache: true,
    threads: require("os").cpus().length, //開(kāi)幾個(gè)線程去處理 
    loaders: [ "cache-loader","babel-loader?cacheDirectory" ]
    verbose: true,         //允許 HappyPack 輸出日志 ,默認(rèn)true
    //threadPool: happyThreadPool,
})

需要注意的只是rules中調(diào)用的HappyPack的id與plugins中實(shí)例化的id相同即可。

最后說(shuō)一下為何要放棄DllPlugin,這個(gè)插件是生成一個(gè)動(dòng)態(tài)的鏈接文件，也就是你把你認(rèn)為不需要多次重復(fù)編譯的文件通過(guò)DllPlugin插件如生成一個(gè).js和.json文件,當(dāng)你第二次進(jìn)行打包編譯的時(shí)候再通過(guò)DllReferencePlugin進(jìn)行引入使用，這樣就會(huì)大大減少了編譯的數(shù)量，好處是可以多一些固定的模塊包進(jìn)行減少處理，但是后來(lái)我發(fā)現(xiàn)，在項(xiàng)目中只有模塊拆分的足夠細(xì)致時(shí)候這個(gè)確實(shí)有不少作用，否則徒增一些步驟，因?yàn)槊看卧诓鸱謮K的時(shí)候，很多的模塊是會(huì)進(jìn)行重新組裝的。(以上只是個(gè)人觀點(diǎn)，僅供參考～)

7、介紹幾個(gè)簡(jiǎn)單的plugins用法

如果是在開(kāi)發(fā)環(huán)境，我們需要對(duì)頁(yè)面進(jìn)行熱更新,我們可以開(kāi)啟:

plugins:[
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
]

NamedModulesPlugin是現(xiàn)實(shí)熱更新的模塊的名稱，HotModuleReplacementPlugin啟用HRM官方有介紹。
如果你是使用VUE開(kāi)發(fā)項(xiàng)目，那么new VueLoaderPlugin()是必不可少的了。
注入一些全局變量使用參考:

new webpack.DefinePlugin({
    //...
}),

重點(diǎn)的說(shuō)一下html-webpack-plugin這個(gè)插件，用于生成過(guò)一些頁(yè)面的小伙伴應(yīng)該都有所了解，那么在生成多個(gè)頁(yè)面的時(shí)候，我們就需要new HtmlWebpackPlugin({ ... })多個(gè)實(shí)例即可，通常情況下，我們會(huì)通過(guò)循環(huán)入口文件進(jìn)行循環(huán)注入一個(gè)數(shù)組中即可。
另外備注一部分參數(shù)的說(shuō)明:

new HtmlWebpackPlugin({
    title: PAGES[k].title || "title",
    chunks: chunks,
    filename:`${k}.html`,
    minify: {
        removeComments: true,       //Strip HTML comments
        collapseWhitespace: true,   //折疊有助于文檔樹(shù)中文本節(jié)點(diǎn)的空白區(qū)域
    },                    //對(duì)html進(jìn)行壓縮,默認(rèn)false
    hash: PAGES[k].hash === true ? true : false,      //默認(rèn)false
    template: PAGES[k].template,
    excludeChunks: excludeChunks,
    favicon:PAGES[k].favicon || ""
    // chunksSortMode:"dependency"
    /**
     * "dependency" 按照不同文件的依賴關(guān)系來(lái)排序。
     * "auto" 默認(rèn)值，插件的內(nèi)置的排序方式，具體順序我也不太清楚...
     * "none" 無(wú)序？ 不太清楚...
     * "function" 提供一個(gè)函數(shù)??！復(fù)雜...
     */
})

上面的代碼只是截取的部分代碼片段，有一些值是需要做一些相應(yīng)的處理，關(guān)于HtmlWebpackPlugin插件的詳細(xì)參考

這里需要注意的是，當(dāng)我們對(duì)項(xiàng)目包中的公共代碼做了不同的splitChunks(下面會(huì)講解這個(gè)模塊)時(shí)候，比如像chunks默認(rèn)會(huì)全部注入進(jìn)入頁(yè)面，所以我么你可能需要手動(dòng)進(jìn)行一些處理，或者使用excludeChunks對(duì)一些塊進(jìn)行排除，其排除的是你最終生成的代碼文件名稱。template是指對(duì)應(yīng)的模版。更加詳細(xì)的參考github 文檔等。

8、敲黑板、講重點(diǎn)的optimization.splitChunks

當(dāng)然目前這部分的文檔在官網(wǎng)還不是很全，所以這里我們參考了印記中文webpack的說(shuō)明文檔，optimization指優(yōu)化模塊。splitChunks可以翻譯為拆分塊，默認(rèn)的配置參數(shù)參考官方文檔即可，重要的說(shuō)一下optimization.splitChunks.cacheGroups,非常強(qiáng)大的一個(gè)API，先說(shuō)什么時(shí)候會(huì)用到這個(gè)功能，這就對(duì)應(yīng)了我們最前面所說(shuō)的，vue-cli3腳手架不太方便的地方，當(dāng)項(xiàng)目包逐漸增大的同時(shí)，通常情況下，會(huì)為我們提供一個(gè)公共文件，在vue-cli3腳手架中，為我們提取了 vendor-chunks.js為所有文件的公共文件，但是如果我們有一個(gè)場(chǎng)景，其中的某一個(gè)頁(yè)面根本不需要依賴一些包的，且這個(gè)包相對(duì)較大的同時(shí)，我們另可多發(fā)一次請(qǐng)求，也不需要去加載這些多余的文件，我們就可以通過(guò)optimization.splitChunks.cacheGroups將這部分公共的提取出來(lái)，在對(duì)制定的頁(yè)面在HtmlWebpackPlugin插件中將它排除即可(或者采用注入指定的chunk的形式)，舉一個(gè)例子，我們可以吧所有頁(yè)面中的vue相關(guān)的源碼包提取到一個(gè)多帶帶的文件，我們可以采用如下的配置：

optimization: {
    splitChunks: {
        minSize: 30000,
        //緩存組
        cacheGroups: {
            vue: {
                test: /([/]node_modules[/]vue)/,  // <- window | mac -> /node_modules/vue/
                name: "vue-vendor",                 //拆分塊的名稱
                chunks: "initial",                  //initial(初始?jí)K)、async(按需加載塊)、all(全部塊)，默認(rèn)為all;
                priority: 100,                      // 該配置項(xiàng)是設(shè)置處理的優(yōu)先級(jí)，數(shù)值越大越優(yōu)先處理
                enforce: true,                      // 如果cacheGroup中沒(méi)有設(shè)置minSize，則據(jù)此判斷是否使用上層的minSize，true：則使用0，false：使用上層minSize
                //minSize: 1024*10,                 //表示在壓縮前的最小模塊大小，默認(rèn)為0；
                //minChunks: 1,                     //表示被引用次數(shù)，默認(rèn)為1；
                //maxAsyncRequests:                 //最大的按需(異步)加載次數(shù)，默認(rèn)為1；
                //maxInitialRequests:               //最大的初始化加載次數(shù)，默認(rèn)為1；
                //reuseExistingChunk: true          //表示可以使用已經(jīng)存在的塊，即如果滿足條件的塊已經(jīng)存在就使用已有的，不再創(chuàng)建一個(gè)新的塊。
            }
        }
    },

}

當(dāng)然你可以根據(jù)自己的需要進(jìn)行多個(gè)的配置，名稱可以自定義，test是過(guò)濾的方式,這里核心要說(shuō)明的是priority（優(yōu)先權(quán)），當(dāng)然是數(shù)字越大優(yōu)先權(quán)越高，什么意思，當(dāng)我們?cè)谶M(jìn)行webpack打包的同時(shí)，會(huì)將我們所有用到的代碼全部加載在內(nèi)存中，進(jìn)行進(jìn)行轉(zhuǎn)換和編譯等操作，拆分塊的核心在于，將一些公共的模塊拆分成多個(gè)模塊，按照優(yōu)先級(jí)進(jìn)行提取出去，生成一個(gè)文件，然后再去查找下一個(gè)優(yōu)先級(jí)的進(jìn)行提取。這里如何進(jìn)行包拆分可以借助webpack-bundle-analyzer插件進(jìn)行可視化的進(jìn)行操作。其用法是直接npm i webpack-bundle-analyzer

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

在webpack中配置plugin選項(xiàng)新增即可:

new BundleAnalyzerPlugin({
    defaultSizes:"gzip",
    logLevel:"warn"
}),

在執(zhí)行項(xiàng)目的時(shí)候會(huì)進(jìn)行包依賴的詳細(xì)分析，此時(shí)我們可以通過(guò)可視化的方式進(jìn)行更好的拆分。

splitChunks也是在webpack4鼎力打造的一個(gè)功能，在于理解其中的用法，拆分的代碼塊更多的時(shí)候是要我們?cè)?b>html-webpack-plugin的時(shí)候更好的生成每一個(gè)獨(dú)立的頁(yè)面，有一些框架中采用了每增加一個(gè)文件就回去自動(dòng)添加一個(gè)新的頁(yè)面的方式，當(dāng)然這樣的額缺點(diǎn)是必須按照對(duì)應(yīng)的目錄進(jìn)行生成對(duì)應(yīng)的頁(yè)面，這里我們采用了手動(dòng)配置的方式生成新的頁(yè)面，每生成一個(gè)頁(yè)面，會(huì)默認(rèn)的注入一些拆分出來(lái)的代碼塊。
雖然html-webpack-plugin沒(méi)生成一個(gè)新的html頁(yè)面必須要實(shí)例化一個(gè)新的對(duì)象。所以我們可以通過(guò)配置文件的循環(huán)進(jìn)行生成對(duì)應(yīng)的配置：

new HtmlWebpackPlugin({
            title: PAGES[k].title || "title",
            chunks: chunks,
            filename:`${k}.html`,
            minify: {
                removeComments: true,       //Strip HTML comments
                collapseWhitespace: true,   //折疊有助于文檔樹(shù)中文本節(jié)點(diǎn)的空白區(qū)域
            },    //對(duì)html進(jìn)行壓縮,默認(rèn)false
            hash: PAGES[k].hash === true ? true : false,      //默認(rèn)false
            template: PAGES[k].template,
            excludeChunks: excludeChunks,
            favicon:PAGES[k].favicon || ""
            // chunksSortMode:"dependency"
            /**
             * "dependency" 按照不同文件的依賴關(guān)系來(lái)排序。
             * "auto" 默認(rèn)值，插件的內(nèi)置的排序方式，具體順序我也不太清楚...
             * "none" 無(wú)序？ 不太清楚...
             * "function" 提供一個(gè)函數(shù)?。?fù)雜...
             */
        })

上面是一些腳手架中的源代碼，在一些簡(jiǎn)單的頁(yè)面，可以通過(guò)排除的方式省去一些文件的加載，而不是通用的加載一個(gè)較大的文件包。在優(yōu)化的過(guò)程中我們可以減少http請(qǐng)求，但是我們也可以減少請(qǐng)求包的大小。

經(jīng)過(guò)一段時(shí)間的考量，我發(fā)現(xiàn)關(guān)于DllPlugin & DLLReferencePlugin這兩個(gè)插件的使用只有在一部分情況下才比較適合，當(dāng)你的項(xiàng)目包中用一個(gè)不需要重新構(gòu)建的模塊的時(shí)候你再使用這個(gè)插件是比較合適的，然而很多時(shí)候，我們每次的構(gòu)建幾乎都會(huì)重新編譯我們的代碼，當(dāng)然他們的使用方式是先通過(guò)DllPlugin去打包好不不需要重新構(gòu)建的文件，同時(shí)生成manifest.json文件，在下次編譯的同時(shí)通過(guò)DLLReferencePlugin進(jìn)行載入即可，減少了一些包的重復(fù)編譯。

寫在最后，這一塊所包含的信息量相對(duì)較多，同時(shí)需要對(duì)項(xiàng)目構(gòu)建有一定程度的了解，在很多的過(guò)程中是需要去思考一個(gè)問(wèn)題的解決方法和方式，而不僅僅是追求使用，每一個(gè)工具都會(huì)提供強(qiáng)大的API和功能以適合眾多的業(yè)務(wù)場(chǎng)景。對(duì)于一些通過(guò)不同的方式得到同樣結(jié)果的問(wèn)題就仁者見(jiàn)仁吧！