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 的配置, 在index.html 文件中可以使用 <%= htmlWebpackPlugin.options.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 使用总结分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/17678.html