個人WebPack入門（二）——html-webpack-plugin

時間 2019-11-09

標籤個人 webpack 入門 html plugin 欄目 HTML 简体版

原文原文鏈接

上一節的入門中，只是跑通了一個很簡單的webpack項目的流程，對其中的參數以及實戰運用中的一些用法並不太清楚，雖然目前工做項目中並無用起webpack，不過以爲仍是須要再去摸索一番，以即可以更清楚的用起這個工具。javascript

上一節最終運行webpack命令，會在dist目錄下生成一個js文件，這時候新建一個index.html文件並引入這個js：html

index.htmljava

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>This is a test</title>
</head>
<body>
<div id="test">Start:</div>
<script src="bundle.f9be197eff25e8667c8c.js"></script>
</body>
</html>

這中間的f9be197eff25e8667c8c就是上一次運行webpack命令時生成的hash值，若是每次對js改動，而後運行webpack命令，都會引發hash值的變化，也就是說每次都得在index.html中改變引入js的名稱，這樣顯然不合理，這時候能夠引入一些插件來進行一些流程上的優化。webpack

html-webpack-plugin

html-webpack-plugin能夠根據你設置的模板，在每次運行後生成對應的模板文件，同時所依賴的CSS/JS也都會被引入，若是CSS/JS中含有hash值，則html-webpack-plugin生成的模板文件也會引入正確版本的CSS/JS文件。git

安裝（Install）

npm install html-webpack-plugin --save-dev

引入

在webpack.config.js中引入：github

const HtmlWebpackPlugin = require('html-webpack-plugin');

配置

module.exports = {
    entry: './app/index.js',
    output: {
        ...
    },
    module: {
        ...
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "This is the result",
            filename: "./index.html",
            template: "./app/index.html",
            inject: "body",
            favicon: "",
            minify: {
                caseSensitive: false,
                collapseBooleanAttributes: true,
                collapseWhitespace: true
            },
            hash: true,
            cache: true,
            showErrors: true,
            chunks: "",
            chunksSortMode: "auto",
            excludeChunks: "",
            xhtml: false
        })
    ]
};

而後看一下這些參數的意義：web

title: 生成的HTML模板的title，若是模板中有設置title的名字，則會忽略這裏的設置npm
filename: 生成的模板文件的名字segmentfault
template: 模板來源文件緩存
inject: 引入模塊的注入位置；取值有true/false/body/head
favicon: 指定頁面圖標；

minify: 是html-webpack-plugin中集成的 html-minifier ，生成模板文件壓縮配置，有不少配置項，能夠查看詳細文檔

caseSensitive: false, //是否大小寫敏感
   collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫爲disabled 
   collapseWhitespace: true //是否去除空格

hash: 是否生成hash添加在引入文件地址的末尾，相似於咱們經常使用的時間戳，好比最終引入是：<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。這個能夠避免緩存帶來的麻煩
cache: 是否須要緩存，若是填寫true，則文件只有在改變時纔會從新生成
showErrors: 是否將錯誤信息寫在頁面裏，默認true，出現錯誤信息則會包裹在一個pre標籤內添加到頁面上
chunks: 引入的模塊，這裏指定的是entry中設置多個js時，在這裏指定引入的js，若是不設置則默認所有引入
chunksSortMode: 引入模塊的排序方式
excludeChunks: 排除的模塊
xhtml: 生成的模板文檔中標籤是否自動關閉，針對xhtml的語法，會要求標籤都關閉，默認false

個人WebPack入門（一）

[3]

相關標籤/搜索

每日一句

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