webpack4.0各個擊破(1)—— html部分

大史不說話發表於2018-08-14

webpack作為前端最火的構建工具,是前端自動化工具鏈最重要的部分,使用門檻較高。本系列是筆者自己的學習記錄,比較基礎,希望通過問題 + 解決方式的模式,以前端構建中遇到的具體需求為出發點,學習webpack工具中相應的處理辦法。(本篇中的引數配置及使用方式均基於webpack4.0版本

webpack4.0各個擊破(1)—— html部分

一. webpack中的html

對於瀏覽器而言,html檔案是使用者訪問的入口點,也是所有資源的掛載點,所有資源都是通過html中的標記來進行引用的。而在webpack的構建世界裡,html只是一個展示板,而entry引數中指定的javascript入口檔案才是真正在構建過程中管理和排程資源的掛載點,html檔案中最終展示的內容,都是webpack在加工併為所有資源打好標記以後傳遞給它的,業界將這種有別與瀏覽器的模式稱之為“webpack的逆向注入”

二.html檔案基本處理需求

前端專案可以大致分為 單頁面應用多頁面應用,現代化元件中的html檔案主要作為訪問入口檔案,是<style> 樣式標籤和<script>指令碼標籤的掛載點,打包中需要解決的基本問題包括:

  • 個性化內容填充(例如頁面標題,描述,關鍵詞)
  • 多餘空格刪除(連續多個空白字元的合併)
  • 程式碼壓縮(多餘空白字元的合併)
  • 去除註釋

三.入口html檔案的處理

3.1 單頁面應用打包

對於入口html檔案的處理直接使用html-webpack-plugin外掛來設定一定的配置引數即可,詳細的配置引數可以參考其github地址:html-webpack-plugin專案地址,在此直接給出基本用法示例。

webpack.config.js配置:

webpack4.0各個擊破(1)—— html部分

index.html模板檔案(構建生成的入口頁面是以此為模板的):

webpack4.0各個擊破(1)—— html部分

打包後生成的index.html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div><p>tony stark</p><p>bruce banner </p></div><script type="text/javascript" src="main.boundle.js"></script></body></html>

3.2 多頁面應用打包

如果專案中有多個頁面,那麼打包的時候需要考慮兩個基本問題:

  • 1.如何自動生成多個頁面?
  • 2.如果引用中存在公共的模組,怎樣才能提取公共模組?

為了演示多頁面應用打包的場景,我們來構建如下的一組示例專案及其依賴關係:

webpack4.0各個擊破(1)—— html部分

多頁面應用的基本結構理解起來並不複雜,可以將其看做是多個單頁面應用的組合,在webpack中需要進行一些配置調整:

entry引數需要配置多個依賴入口檔案:

entry:{
    "main":__dirname + "/src/indexController.js",
    "about":__dirname + "/src/aboutController.js",
    "list":__dirname + "/src/listController.js",
},

html檔案則需要分別引用對應的入口檔案並生成對應的訪問入口:

    plugins:[
        //index.html
        new HtmlWebpackPlugin({
            title:`MainPage`,
            template:`src/index.html`,
            filename:`index.html`,
            templateParameters:{
                param1:`tony stark`,
                param2:`bruce banner`
            },
            chunks:[`main`],
       }),
        //about.html
        new HtmlWebpackPlugin({
            title:`AboutPage`,
            template:`src/about.html`,
            filename:`about.html`,
            templateParameters:{
                param1:`tony stark`,
                param2:`bruce banner`
            },
            chunks:[`about`],
       }),
       //list.html
       new HtmlWebpackPlugin({
            title:`ListPage`,
            template:`src/list.html`,
            filename:`list.html`,
            templateParameters:{
                param1:`tony stark`,
                param2:`bruce banner`
            },
            chunks:[`list`],
       }),
    ],

可以看到在生成html檔案時已經為其單獨引用了chunks陣列中指定的模組,這使得對應的頁面生成時只依賴自己需要的指令碼。

1.關於公共模組提取

webpack4.0各個擊破(1)—— html部分

上一小節解決了多頁面應用的基本打包的需求,從得到的打包後的模組中,很容易看出它存在重複打包的問題,eventbus.js這個公共庫被indexController.jsaboutController.js中均被引用,但在不同的chunks中被重複打包,當公共部分的體積較大時,這樣的方式明顯是不能接受的。實際上分包問題並不是多頁面應用中才存在的,而且是非常複雜的,它不僅要考慮公共模組本身的大小,模組之間的引用關係,還需要考慮同步引用和非同步引用等等非常多的問題,筆者尚未研究清楚。

webpack1-3的版本中使用commonsChunkPlugin外掛來解決這個問題,在4.0以上的版本中廢棄了原有方法,改為使用optimization.splitChunksoptimization.runtimeChunk來解決優化chunk拆分的問題,關於兩者的區別可以看《webpack4:連奏中的進化》這篇博文。

2. 元件模板html檔案的處理

在基於Angular的專案中或許你會需要處理此類問題。github上點贊較多的Angular-webpack-starter專案對於html檔案的處理是直接使用raw-loader當做文字檔案處理,推測其內部將html檔案中的內容當做模板字串使用並在框架內部進行了加工。

需要注意的是,html-webpack-plugin外掛是依賴於html-loader而工作的,當你顯式使用/.html$/作為規則來篩選檔案時,同樣會選擇到作為入口檔案的html資源,從而造成衝突報錯。在Angularjs1.X專案中可考慮使用ngTemplage-loader外掛。

四. 小結

本文使用的html檔案是較為簡單的,僅包含基本的標籤和屬性,並未包含其他資源引用(樣式,圖片等),畢竟webpack的組成部分太過龐雜,去除干擾資訊有針對性的學習更容易理解。資源管理及定位將在後續的章節闡述。

相關文章