内容简介：生成的文件如下：
html-webpack-plugin
的作用是：当使用 webpack
打包时，创建一个 html
文件，并把 webpack
打包后的静态文件自动插入到这个 html
文件当中。
使用
安装
npm install html-webpack-plugin --save-dev 复制代码
使用默认配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
复制代码
html-webpack-plugin
默认将会在 output.path
的目录下创建一个 index.html
文件， 并在这个文件中插入一个 script
标签，标签的 src
为 output.filename
。
生成的文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
复制代码
当配置多个入口文件 entry
时， 生成的将都会使用 script
引入。
如果 webpack
的输出中有任何CSS资源 (例如，使用 mini-css-extract-plugin
提取的 CSS
)，那么这些资源将包含在 HTML
头部的 link
标记中。
更多配置
在实际的项目中，需要自定义一些 html-webpack-plugin
的配置， 像指定生成目录和文件， 使用指定模版生成文件， 更改 document.title
信息等， 这就更改默认配置来实现。
| 属性名 | 字段类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | Webpack App |
网页 document.title
的配置 |
| filename | String | index.html |
html
文件生成的名称，可以使用 assets/index.html
来指定生成的文件目录和文件名,
重点1:生成文件的跟路径为 ouput.path
的目录。 重点2: ‘assets/index.html’ 和 ./assets/index.html
这两种方式的效果时一样的， 都是在 output.path
目录下生成 assets/index.html
|
| template | String | 空 |
生成 filename
文件的模版， 如果存在 src/index.ejs
， 那么默认将会使用这个文件作为模版。
重点：与 filename
的路径不同， 当匹配模版路径的时候将会从项目的跟路径开始
|
| templateParameters | Boolean|Object|Function | 空 | 覆盖默认的模版中使用的参数 |
| inject | Boolean|String | true |
制定 webpack
打包的 js
css
静态资源插入到 html
的位置， 为 true
或者 body
时， 将会把 js
文件放到 body
的底部， 为 head
时， 将 js
脚本放到 head
元素中。 |
| favicon | String | 空 |
为生成的 html
配置一个 favicon
|
| mete | Object | {} |
为生成的 html
文件注入一些 mete
信息， 例如： {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
|
| base | Object|String|false | false |
在生成文件中注入 base
标签， 例如 base: "https://example.com/path/page.html
<base>
标签为页面上所有的链接规定默认地址或默认目标
|
| minify | Boolean|Object |
如果 mode
设置为 production
默认为 true
否则设置为 false
|
设置静态资源的压缩情况 |
| hash | Boolean | false |
如果为真，则向所有包含的 js
和 CSS
文件附加一个惟一的 webpack
编译散列。这对于更新每次的缓存文件名称非常有用 |
| cache | Boolean | true |
设置 js
css
文件的缓存，当文件没有发生变化时， 是否设置使用缓存 |
| showErrors | Boolean | true | 当文件发生错误时， 是否将错误显示在页面 |
| xhtml | Boolean | false |
当设置为 true
的时候，将会讲 <link>
标签设置为符合 xhtml
规范的自闭合形式 |
属性的使用方法
webpack.config.js
{
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html' // 在 output.path 目录下生成 assets/admin.html 文件
})
]
}
复制代码
生成多个 html
文件
生成多个 html
文件只需要多次在 plugins
中使用 HtmlWebpackPlugin
webpack.config.js
{
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'My App',
filename: 'assets/admin.html' // 在 output.path 目录下生成 assets/admin.html 文件
})
]
}
复制代码
使用自定义模版生成 html
文件
如果默认的 html
模版不能满足业务需求， 比如需要蛇生成文件里提前写一些 css
'js' 资源的引用， 最简单的方式就是新建一个模版文件， 并使用 template
属性指定模版文件的路径， html-webpack-plugin
插件将会自动向这个模版文件中注入打包后的 js
'css' 文件资源。
webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: 'public/index.html'
})
]
复制代码
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
<link src="xxx/xxx.css">
</head>
<body>
</body>
</html>
复制代码
使用自定义的模版接收 HtmlWebpackPlugin
中定义的 title
需要使用 <%= htmlWebpackPlugin.options.title %>
Minification
如果 minify
选项设置为 true
(webpack模式为 production
时的默认值)，生成的 HTML
将使用 HTML-minifier
和以下选项进行压缩:
{
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
复制代码
若要使用自定义 html
压缩器选项，请传递一个对象来配置。此对象不会与上面的默认值合并。
若要在生产模式期间禁用 minification
，请将 minify
选项设置为 false
。
以上所述就是小编给大家介绍的《html-webpack-plugin 使用总结》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Adobe Dreamweaver CS5中文版经典教程
Adobe公司 / 陈宗斌 / 人民邮电 / 2011-1 / 45.00元
《Adobe Dreamweaver CS5中文版经典教程》由Adobe公司的专家编写，是AdobeDreamweavelCS5软件的官方指定培训教材。全书共分为17课，每一课先介绍重要的知识点，然后借助具体的示例进行讲解，步骤详细、重点明确，手把手教你如何进行实际操作。全书是一个有机的整体，它涵盖了Dreamweavercs5的基础知识、HTML基础、CSS基础、创建页面布局、使用层叠样式表、使......一起来看看 《Adobe Dreamweaver CS5中文版经典教程》 这本书的介绍吧!
