Webpack4+ 多入口程序構建

歡迎關注富途web開發團隊，缺人從衆

其實，說實話這篇文章的由來也是有不少的緣由在裏面的。在這以前，我也作過很多的項目。有新的項目，也有舊的項目。經過對舊項目的不斷研究，改進。再結合本身的理解，將新的構建應用到新的項目中。通過時間的積累，慢慢的就有了一套感受上還比較適合的webpack前端構建規範。

那這裏來講說，webpack4+構建上的一些事吧。

多入口的意思大概就是，訪問不一樣頁面的時候，主要的前端JS功能文件是不一樣的。最好的對比和區別就是SPA單頁面應用，每一個頁面引入的文件都是同一份JS文件。

我指望的構建是：

1. 一鼓作氣（編碼過程爽不爽）
2. 極大程度脫離後端語言限制（解耦）
3. 多入口（多入口，多頁面）

一鼓作氣，意味着項目從你執行git clone，拉取代碼開始，直到你git push推送代碼。這之間，全部與編碼無關的，是一鼓作氣的，並不須要你過多的配置。但願作到的就是編碼的極致體驗。整個過程，指望開發人員關心的只有一件事，就是本身編寫的代碼是否OK。

那也意味着webpack構建須要作更多的事。

提及脫離後端語言，這並非什麼好事，只不過要看項目合不合適。在最近寫的項目裏面，使用的是vue + Node.js。使用vue ，通常意味着模版文件裏面其餘不多有Node.js模版（例如：jade，swig）代碼，也不多有前端代碼。也就是一個空殼頁面，作過SPA單頁面應用的應該比較熟悉。

那也就是這個空殼頁面，其實和後端語言沒有太大的耦合關係。那也意味着，我能夠極大程度的作到先後端代碼解耦。這是什麼意思？

試想一下，本身在開發過程當中，須要關注的無非就2個東西：頁面，靜態資源。編碼上與後端有耦合的就是隻有頁面，就像上面說的，使用vue作SPA，其實頁面裏面其實並無和後端有耦合。

也就說，這爲先後端結構上解耦，提供了便利。前端全部資源能夠獨立出來，只要保證，經過構建以後，能將頁面，靜態資源生成到指定項目目錄便可。

那構建這裏就是由webpack來作。

上圖中已經標明：

1. client：是放前端資源目錄
2. server：是放後端資源的目錄。這裏假如後端爲Node.js
3. static：是靜態資源目錄。也就是js/css文件放置的地方

那這裏就引出了一個值得先思考的問題，webapck構建的目的是什麼？落實到工程項目裏面，構建的目的又是什麼？

結合上面的目錄結構圖，若是說webpack的目的是將靜態資源打包編譯；那麼在工程上，就是將前端資源client目錄資源經過webpack構建到指定的static和server/views目錄。

那這樣是否是就作到了極大程度的解耦呢。

那如何在單入口的webpak構建工程上進行修改變爲多入口構建工程？這就是今天這篇文章須要解決的問題，也是我一直以來須要解決的問題，也是寫這篇文章的初衷。

面對這個多入口程序構建問題，這裏先從當前現狀提及吧。

注意：如下的全部內容都是在單入口的基礎上進行講述的，相關demo在這裏：webpack案例

webpack構建現狀

一直以來，webpack構建我只作了單入口構建。也就是你們熟悉的SPA。這也並無影響到項目的運行，由於項目功能單一，目標明確，資源文件不會太大，因此打包壓縮以後，出來的文件也不會很大，適當的進行拆分就能夠。

如圖，構建很簡單，單入口，單頁面。全部的文件都是經過main.js和其引入的子模塊引入，造成單入口。做爲經典的SPA項目，就一個入口頁面index.html，前端跳轉由前端路由和後端路由協做完成。

那麼須要webpack作的事情其實就很好理解了：

1. 引入對應文件的模塊解析。例如：vue-loader，babel-loader，css-loader等
2. 提取css爲外部引入，經過link標籤引入
3. 文件壓縮
4. 大文件拆分
5. 公共文件提取爲獨立文件
6. 經過html-webpack-plugin將全部依賴的js/css等靜態資源注入模版文件，生成目標文件保存到指定服務器模版文件目錄

都說了，其實前端最後須要處理的文件大機率就3個html，js，css。

demo詳情地址-->> 單入口案例

webpack4+ 多入口構建思路

既然都已經知道單入口構建怎麼玩的了。那麼就來思考一下webpack多入口構建怎麼玩唄。

先不說，webpack怎麼配置。從需求上來講，不就是指望：

1. 有不少的入口文件
2. 有不少的html模版文件生成。這裏會生成到server/views目錄
3. html模版文件引入本身模塊須要的js/css等靜態資源便可，其餘模塊的不引入，以避免產生冗餘代碼

上圖的靜態資源js/css會生成並保存到static目錄。

也就是說上圖的pagea.js入口文件，經過webpack構建以後，只會注入pagea.html。而不會注入pageb.html。

這裏其實難點，就一個：如何讓對應的入口文件的html模版文件，引入只與本模塊有關的js/css。

webpack4+ 多入口構建配置實戰

那不廢話，實戰中要如何配置呢？這恐怕並非只有我一我的想知道。其實上面的每一個問題在這裏都有解決的方案。

如圖，能夠看到多入口配置，超級簡單在entry添加對應模塊入口便可。

entry:{//入口文件
  pagea:'./client/pagea/index.js', 
  pageb:'./client/pageb/index.js'
}
複製代碼

這裏demo裏面有2個入口文件pagea.js和pageb.js。

針對這個如何讓對應的入口文件的html模版文件，引入只與本模塊有關的js/css問題。

能夠經過html-webpack-plugin解決。首先配置多個html-webpack-plugin實例對象，而後指定每一個實例對象須要引入的chunks文件便可。

new HtmlWebpackPlugin({
    filename: './../../server/views/pagea.html',
    chunks:['pagea'],
    template: path.resolve(__dirname , './client/template.html')
}),
new HtmlWebpackPlugin({
    filename: './../../server/views/pageb.html',
    chunks:['pageb'],
    template: path.resolve(__dirname , './client/template.html')
})
複製代碼

這裏配置很簡單。pagea.html配置只引入pagea.js。當須要引入多個的時候只須要在數組裏面添加對應的模塊名稱便可。

配置完了，來看看結果如何吧。

執行npm install 先下載完所須要的模塊，再經過執行webpack命令進行構建。

webpack請全局安裝，須要 v4.5+。

能夠看到，經過webpack打包編譯，生成了咱們想要的pagea.html和pageb.html。而且js文件注入正常。

那如今可執行npm run develop命令啓動node.js服務。在瀏覽器打開127.0.0.1:4000 就看到了頁面了。

pagea.html和pageb.html，引入正常，並正常運行。大功告成！！！！

demo詳情地址-->> 多入口案例

webpack4+ 優化

當你覺得一切迴歸平靜時，其實才是挑戰的開始。要作到多入口，其實感受仍是挺簡單的。要作的好，其實距離仍是很遠的。再往下的篇幅其實已經和多口構建沒有多少關係了。主要是一些基於webpack4+ 優化的點，也就是遇到相關問題的解決方案。

Split Chunks模塊拆分

項目小的時候，感受什麼都是那麼爽。啥事也沒有。但是項目一旦變得複雜，那麼其實不少以前沒有遇到的問題就會暴露無遺。

當我在pagea.js嘗試引入vue，tui-chart圖表模塊的時候，發現了打包出來的文件過於龐大，達到了2.2MB，即便壓縮以後同樣。

那麼是時候引入文件拆分了，由於webpack4+以後，並不建議再使用CommonChunks模塊，因此使用新的官方推薦的SplitChunks模塊。

經過在webpack的plugin裏面添加：

new webpack.optimize.SplitChunksPlugin({
    chunks: 'all',
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '-',
    name: true,
    cacheGroups: {
        vue: {
            test: /[\\/]node_modules[\\/]vue[\\/]/,
            priority: -10,
            name: 'vue'
        },
        'tui-chart': {
            test: /[\\/]node_modules[\\/]tui-chart[\\/]/,
            priority: -20,
            name: 'tui-chart'
        }
    }
})
複製代碼

添加splitChunks方式有多種，上面只是其中一種。

經過在cacheGroups裏面設置公共模塊，達到模塊複用。須要注意的就是，在html-webpack-plugin實例中引入chunks時，須要加入對應的模塊。

new HtmlWebpackPlugin({
    filename: './../../server/views/pagea.html',
    chunks:['vue','tui-chart','pagea'],
    template: path.resolve(__dirname , './client/template.html')
})
複製代碼

上面的pagea.html不只須要引入pagea，還須要而爲引入vue和tui-chart。

經過上圖，最後看到打包拆分出來的js文件體積仍是很可觀的。

MiniCssExtract提取爲外部CSS

說完了JavaScript的體積拆分，其實CSS上面也有一個問題。就是，我並無在上面的demo中作到經過link標籤引入。這裏將解決這個問題。

webpack4+ 提供了一個新的模塊叫作MiniCssExtract。這個模塊就能夠處理.css外鏈引入的問題。

首先在rules裏面配置：

{
  test: /\.s?[ac]ss$/,//postcss-loader 依賴 postcss-config.js
  use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader'] 
}
複製代碼

主要是將原來的style-loader替換成MiniCssExtractPlugin.loader。若是須要區分環境，進行不一樣引入也是能夠的。

而後須要在下面進行plugins引入：

new MiniCssExtractPlugin({ //提取爲外部css代碼
    filename:'[name].css?v=[contenthash]'
})
複製代碼

當一切完成以後。執行相關命令。

能夠看到，生成的html文件成功的引入了本身須要的文件。

是否是成功了呢？ 哈哈。。。。。

趕忙去驗證吧！！！！！！必定要驗證哦。。。。。。。。。。

demo詳情地址-->> 多入口優化案例

總結

大致上，webpack4+構建和其餘版本的沒有多大區別，最多就是模塊的使用有點不一樣。不過對於我來講，解決了我原來糾結的多入口構建問題。但同時這也是一個demo,算不上是一個完整的構建。還缺不少的東西，可是基礎已經在這裏了，因此能夠在此基礎上優化，最終達到本身想要的構建配置。

最後有一個問題，那就是全部打包後生成的文件入不入版本庫呢？

這裏我給出所謂答案在這篇文章：小馬的大前端之路--Node.js初探