内容简介:生成的文件如下:
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 使用总结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。