上一節的入門中,只是跑通了一個很簡單的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
能夠根據你設置的模板,在每次運行後生成對應的模板文件,同時所依賴的CSS/JS也都會被引入,若是CSS/JS中含有hash值,則html-webpack-plugin
生成的模板文件也會引入正確版本的CSS/JS文件。git
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
[3]