前言

最近新起了一個(gè)多頁項(xiàng)目，之前都未使用 webpack4，于是準(zhǔn)備上手實(shí)踐一下。這篇文章主要就是一些配置介紹，對于正準(zhǔn)備使用 webpack4 的同學(xué)，可以做一些參考。

webpack4 相比之前的 2 與 3，改變很大。最主要的一點(diǎn)是很多配置已經(jīng)內(nèi)置，使得 webpack 能“開箱即用”。當(dāng)然這個(gè)開箱即用不可能滿足所有情況，但是很多以往的配置，其實(shí)可以不用了。比如在之前，壓縮混淆代碼，需要增加uglify插件，作用域提升(scope hosting)需要增加ModuleConcatenationPlugin。而在 webpack4 中，只需要設(shè)置 mode 為 production即可。當(dāng)然，如果再強(qiáng)行增加這些插件也不會(huì)報(bào)錯(cuò)。

所以我建議，如果大家想遷移到 webpack4，還是從 0 開始做加法，參考?xì)v史，重新做一個(gè)配置。而不是從歷史的配置里刪刪減減，再升級(jí)為 webpack4。這樣 webpack4 的配置會(huì)顯得更精簡。

打包優(yōu)化

打包優(yōu)化主要就是多頁應(yīng)用構(gòu)建時(shí)，對所有頁面加載的依賴進(jìn)行合理打包。這個(gè)目前業(yè)界都已經(jīng)有了很多實(shí)踐，包括 webpack4，也有很多文章介紹。我再補(bǔ)充幾個(gè)不容易注意的小細(xì)節(jié)。有些點(diǎn)我不詳細(xì)介紹，不熟悉 webpack 配置的同學(xué)可能會(huì)不明白，可以搜索對應(yīng)關(guān)鍵詞，網(wǎng)上肯定有非常詳細(xì)的文章介紹。

首先，構(gòu)建多頁應(yīng)用，往往會(huì)抽離如下幾個(gè) chunk 包：

然后我們會(huì)給打出的 chunk 包名，注入 contentHash，以實(shí)現(xiàn)最大緩存效果。在我們分 chunk 的過程中，最關(guān)鍵的一個(gè)思想就是，每次迭代發(fā)布，盡量減少 chunk hash 值的改變。這個(gè)在業(yè)界也有很多非常多的實(shí)踐，比如這篇文章：https://github.com/pigcan/blog/issues/9

不過在 webpack4 中，我們不用再增加這么多插件啦，一個(gè) optimization 配置完全就能搞定。

我先貼上我的 webpack 的 optimization 配置，然后我再對其做一些介紹，加深大家印象

const commonOptions = { chunks: 'all', reuseExistingChunk: true}export default { namedChunks: true, moduleIds: 'hashed', runtimeChunk: {  name: 'manifest' }, splitChunks: {  maxInitialRequests: 5,  cacheGroups: {   polyfill: {    test: /[///]node_modules[///](core-js|raf|@babel|babel)[///]/,    name: 'polyfill',    priority: 2,    ...commonOptions   },   dll: {    test: /[///]node_modules[///](react|react-dom)[///]/,    name: 'dll',    priority: 1,    ...commonOptions   },   commons: {    name: 'commons',    minChunks: Math.ceil(pages.length / 3), // 至少被1/3頁面的引入才打入common包    ...commonOptions   }  } }}