webpack基礎篇-HtmlWebpackPlugin生成html（七）

我們現在的代碼裏，html中引入的index.js是手動寫入的，主要問題有：

我們打包好的文件有時候會帶有hash（接下來一章會講到），如果直接引入，則每次修改都需要手動修改引入。

HtmlWebpackPlugin讓你可以用此插件爲你生成一個HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

1，安裝HtmlWebpackPlugin

npm install  html-webpack-plugin -D

2，單頁面：在webpack.config.js裏設置plugins

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
		output:{
            path: path.resolve(__dirname,"../dist"),
            filename: '[name].js',
        },
  plugins:[
    new HtmlWebpackPlugin({
       template:  path.resolve(__dirname,'../src/index.html'),
       filename: 'index.html'
     }),
  ]
}

template:爲html模板地址

filename：生成的html的名字爲index.html，相對於output.path裏設置的路徑。默認路徑爲output.path設置的路徑

3，運行

修改模板index.html文件，把之前引入的刪除。

npm start

運行後可以看到dist目錄除了js外，多了一個index.html文件。

打開這個文件可以看到，除了模板index.html裏本來有的內容外，多了兩個js引用index.js和page2.js。

4，多頁面打包

多頁面打包和單頁面打包基本一致的，區別是有幾個html要在plugins裏new幾個HtmlWebpackPlugin對象。每個對象裏設置下要引入的js

如下代碼(爲部分代碼)，程序裏有index.html和page2.html，打包後生成兩個頁面

 
 module.exports = {
     entry:{
                index: path.resolve(__dirname,'../src/index.js'),
                page2: path.resolve(__dirname,'../src/page2.js'),
            },
     plugins:[
            new HtmlWebpackPlugin({
                template:  path.resolve(__dirname,'../src/index.html'),
                filename: 'index.html',
                chunks:["index"]
            }),
            new HtmlWebpackPlugin({
                template:  path.resolve(__dirname,'../src/page2.html'),
                filename: 'page2.html',
                chunks:["page2"]
            }),
     ]
 }

chunks：代表要加載的js名稱，名稱來自entry中定義的文件名

下表格爲htmlWebpackPlugin插件的官網給出的屬性及其描述。

Name	Default	Type	Description
title	Webpack App	{String}	The title to use for the generated HTML document
filename	'index.html'	{String}	The file to write the HTML to. Defaults to index.html. You can specify a subdirectory here too (eg: assets/admin.html)
template	``	{String}	webpack relative or absolute path to the template. By default it will use src/index.ejs if it exists. Please see the docs for details
templateContent	false	{string|Function|false}	Can be used instead of template to provide an inline template - please read the Writing Your Own Templates section
templateParameters	false	{Boolean|Object|Function}	Allows to overwrite the parameters used in the template - see example
inject	true	{Boolean|String}	true || 'head' || 'body' || false Inject all assets into the given template or templateContent. When passing true or 'body' all javascript resources will be placed at the bottom of the body element. 'head' will place the scripts in the head element - see the inject:false example
scriptLoading	'blocking'	{'blocking'|'defer'}	Modern browsers support non blocking javascript loading ('defer') to improve the page startup performance.
favicon	``	{String}	Adds the given favicon path to the output HTML
meta	{}	{Object}	Allows to inject meta-tags. E.g. meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
base	false	{Object|String|false}	Inject a base tag. E.g. base: "https://example.com/path/page.html
minify	true if mode is 'production', otherwise false	{Boolean|Object}	Controls if and in what ways the output should be minified. See minification below for more details.
hash	false	{Boolean}	If true then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting
cache	true	{Boolean}	Emit the file only if it was changed
showErrors	true	{Boolean}	Errors details will be written into the HTML page
chunks	?	{?}	Allows you to add only some chunks (e.g only the unit-test chunk)
chunksSortMode	auto	{String|Function}	Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are 'none' | 'auto' | 'manual' | {Function}
excludeChunks	``	{Array.}	Allows you to skip some chunks (e.g don’t add the unit-test chunk)
xhtml	false	{Boolean}	If true render the link tags as self-closing (XHTML compliant)