webpack4.0各個擊破（1）—— html部分

時間 2019-11-07

標籤 webpack4.0 webpack 各個擊破 html 部分欄目 HTML 简体版

原文原文鏈接

webpack做爲前端最火的構建工具，是前端自動化工具鏈最重要的部分，使用門檻較高。本系列是筆者本身的學習記錄，比較基礎，但願經過問題 + 解決方式的模式，之前端構建中遇到的具體需求爲出發點，學習webpack工具中相應的處理辦法。（本篇中的參數配置及使用方式均基於webpack4.0版本）javascript

一. webpack中的html

對於瀏覽器而言，html文件是用戶訪問的入口點，也是全部資源的掛載點，全部資源都是經過html中的標記來進行引用的。而在webpack的構建世界裏，html只是一個展現板，而entry參數中指定的javascript入口文件纔是真正在構建過程當中管理和調度資源的掛載點，html文件中最終展現的內容，都是webpack在加工併爲全部資源打好標記之後傳遞給它的，業界將這種有別與瀏覽器的模式稱之爲「webpack的逆向注入」。html

二.html文件基本處理需求

前端項目能夠大體分爲 單頁面應用 和 多頁面應用，現代化組件中的html文件主要做爲訪問入口文件，是<style> 樣式標籤和<script>腳本標籤的掛載點，打包中須要解決的基本問題包括：前端

個性化內容填充（例如頁面標題，描述，關鍵詞）
多餘空格刪除（連續多個空白字符的合併）
代碼壓縮（多餘空白字符的合併）
去除註釋

三.入口html文件的處理

3.1 單頁面應用打包

對於入口html文件的處理直接使用html-webpack-plugin插件來設置必定的配置參數便可，詳細的配置參數能夠參考其github地址:html-webpack-plugin項目地址，在此直接給出基本用法示例。java

webpack.config.js配置：webpack

index.html模板文件(構建生成的入口頁面是以此爲模板的):git

打包後生成的index.html:github

<!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 多頁面應用打包

若是項目中有多個頁面，那麼打包的時候須要考慮兩個基本問題：web

1.如何自動生成多個頁面？
2.若是引用中存在公共的模塊，怎樣才能提取公共模塊？

爲了演示多頁面應用打包的場景，咱們來構建以下的一組示例項目及其依賴關係：數組

多頁面應用的基本結構理解起來並不複雜，能夠將其看作是多個單頁面應用的組合，在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.關於公共模塊提取

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

webpack1-3的版本中使用commonsChunkPlugin插件來解決這個問題，在4.0以上的版本中廢棄了原有方法，改成使用optimization.splitChunks和optimization.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的組成部分太過龐雜，去除干擾信息有針對性的學習更容易理解。資源管理及定位將在後續的章節闡述。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。