安裝 & 引用
npm i --save-dev html-webpack-plugin
// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
...
new HtmlWebpackPlugin({title: 'Webpack App' })
]
結果
命令行
Paste_Image.png
index.html
Paste_Image.png
Case1 添加 template
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
})
// index.tmpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
Paste_Image.png
命令行
Paste_Image.png
打包后
Paste_Image.png
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script type="text/javascript" src="init.js"></script><script type="text/javascript" src="second.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
總結
Configuration
You can pass a hash of configuration options to HtmlWebpackPlugin. Allowed values are as follows:
- title: The title to use for the generated HTML document.
- filename: The file to write the HTML to. Defaults to index.html. You can specify a subdirectory here too (eg: assets/admin.html).
- template: Webpack require path to the template. Please see the docs for details.
- inject: 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. - favicon: Adds the given favicon path to the output html.
- minify: {...} | false Pass a html-minifier options object to minify the output.
- hash: true | false if true then append a unique webpack compilation hash to all included scripts and CSS files. This is useful for cache busting.
- cache: true | false if true (default) try to emit the file only if it was changed.
- showErrors: true | false if true (default) 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: Allows to control how chunks should be sorted before they are included to the html. Allowed values: 'none' | 'auto' | 'dependency' | {function} - default: 'auto'
- excludeChunks: Allows you to skip some chunks (e.g. don't add the unit-test chunk)
- xhtml: true | false If true render the link tags as self-closing, XHTML compliant. Default is false
Here's an example webpack config illustrating how to use these options:
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html'
})
]
}
