個人WebPack入門(二)——html-webpack-plugin

上一節的入門中,只是跑通了一個很簡單的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]

相關文章
相關標籤/搜索