webpack4構建多頁應用，瞭解一下

用webpack構建多頁應用能夠有2種思路，多頁面單配置 vs. 多頁面多配置。
本例子採用多頁面單配置，即在單頁應用配置的基礎上，主要把entry和plugins中的html-webpack-plugin進行改造便可。

多頁面單配置的優勢在於，不一樣頁面能夠共享相同代碼，容易實現長緩存。缺點主要是隨着項目的日漸龐大，打包速度會有明顯降低；而多頁面多配置的有點在於，打包速度會將對快不少並且有parallel-webpack插件可使用，可是它不容易實現共享代碼的長緩存，它會把頁面加載的成本轉移到用戶那裏。

本文着重介紹如何用webpack構建多頁應用（採用多頁面單配置的方式），因此webpack的基本配置不會詳述~ 若要了解webpack相關配置可移步----基於vue2.x的webpack配置(生產環境~)

先介紹頁面結構：

首先，多頁應用一定有多個entry。那麼根據上面項目目錄，如何生成多個entry呢？上圖：

能夠看到咱們生成的entries長這樣：

{
  "views/template001/yz": "....(省略前面) /src/views/template001/yz/yz.js", 
  "views/template002/yz": "....(省略前面) /src/views/template002/yz/yz.js"
}

//所以，[name]對應的值即是以下：
  "views/template001/yz"
  "views/template002/yz"

既然項目結構如此，那麼接下來要考慮的是，咱們但願打包後生成的目錄結構是怎樣，只有先設計好了目錄結構，方可動手操做。

在此例中，我但願打包結果的項目路徑是這樣的：

-dist
  -views （----放置html文件）
     -template00X
        -XX.html
  -css    （----放置css文件）
    -views
      -template00X
        -XX.css
  -js    （----放置js文件）
    -views
      -template00X
        -XX.js

ok，至此咱們明確了打包後的目錄結構。接下來，咱們再看看什麼會影響打包後的目錄結構或說頁面文件的引用路徑呢？

幾個關鍵詞：

output: {
    path: //打包生成的根目錄，通常取名爲dist
    filename: // [name]和entry對象的key一一對應，可是咱們能夠對路徑進行修改，如'js/[name].js'，即統一放在js目錄下。若是在咱們這個多頁應用項目裏不寫filename，它會影響打包後webpack運行時的manifest.js文件的路徑。由於webpack把manifest文件當作初始文件加載，不會放在動態加載的chunk裏面。
    publicPath: // 這表明外部訪問靜態資源文件的路徑
    chunkFilename: // 動態加載的文件，在這裏指vendor和各自頁面須要引用的js文件
}

··············································我是關鍵的分界線··············································

運用html-webpack-plugin能夠自定義打包結果的位置等，在此例中它是以下設置的：
經過這個配置，能夠看到生成的html文件的路徑是這樣的：‘dist/views/template00X/yz.html’。

chunks的設置在多頁應用中尤其關鍵，它會指明你須要將哪些js文件打包進頁面中。若是不指明，則webpack會默認把打包生成的全部js都放進每一個多頁面中。

接下來，咱們來設置靜態資源的打包路徑。上圖：
這裏須要註明config/index.js裏面build和dev的assetsPublicPath:

注意，assetsPublicPath表明的是output中的publicPath。這意味着，它表示的是靜態資源引用的源路徑。在此項目中，publicPath是"../../"表示要訪問到資源文件，須要從html文件向上返回兩個層級，由於這個項目的目錄結構是"views/template00X/"。還記得嗎？（不記得？往上看entries生成的路徑是啥樣的。）

弄明白了這一點，就知道要訪問靜態資源文件，須要返回兩級，到dist這個根目錄級別，而後再去找對應的資源。

上面咱們已經設置好js的訪問路徑，可是css的打包路徑得在mini-css-extract-plugin這個插件中設置，以下：

據此，咱們已經設置多頁應用的基本配置啦。上打包後的dist目錄：

須要說明的是manifest.js和vendor.chunk.js爲何直接放在js層級下？首先，咱們設置了代碼分割。第二，我我的粗淺的理解是~ manifest.js是頁面運行時首先必須執行的文件，所以它不會是動態引入的chunk，於是打包在第一層級。至於爲何會放在dist/js/目錄下呢？記得前面咱們在output的filename中設置了"js/[name].js"麼。而vendor之因此是chunk級別的js，首先是由於它是項目運行所依賴的文件 ，但它能夠沒必要是頁面最開始就要加載的。下面放代碼分割的配置：

塔拉~ 今日份的筆記就到這裏啦，晚安~