Webpack——html-webpack-plugin 插件
安装插件
- html-webpack-plugin插件
这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务。这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译。您可以让插件为您生成HTML文件,使用lodash模板提供您自己的模板或使用您自己的加载器。
- 在开发时使用插件
npm i -D html-webpack-plugin #-D = --save-dev
在html-webpack-plugin提供钩把它扩大到您的需求。已经有一些非常强大的插件可以与零配置集成
webpack-subresource-integrity
用于增强资产安全性appcache-webpack-plugin
适用于iOS和Android离线使用favicons-webpack-plugin
为iOS,Android和桌面浏览器生成图标和图标html-webpack-harddisk-plugin
可用于始终将html文件写入磁盘,在使用webpack-dev-server / HMR时经常用到html-webpack-inline-source-plugin
用于在生成的HTML文件中内联您的资源html-webpack-inline-svg-plugin
在生成的HTML文件中内联SVG。html-webpack-exclude-assets-plugin
,用于使用正则表达式排除资产html-webpack-include-assets-plugin
,用于包含js或css文件路径列表例如copy-webpack-plugin复制的路径)。script-ext-html-webpack-plugin
添加async,defer或module属性的<script>元素,甚至他们内联style-ext-html-webpack-plugin
将<link>s 转换为外部样式表,转换为<style>包含内部CSS的元素resource-hints-webpack-plugin
使用和添加资源提示以加快初始页面加载速度<link rel=‘prefetch’>preload-webpack-plugin
,用于通过帮助延迟加载自动连接异步(和其他类型)的JavaScript块link-media-html-webpack-plugin
允许注入的样式表<link />标签自动设置其媒体属性; 用于提供浏览器有条件下载的特定桌面/移动/打印等样式表inline-chunk-manifest-html-webpack-plugin
用于内联webpack的块清单。默认提取清单和内联<head>html-webpack-inline-style-plugin
,用于使用juice将样式内联到HTML元素。适用于电子邮件生成自动化。html-webpack-exclude-empty-assets-plugin
删除空资产不被添加到html中。这解决了使用webpack 4的extract-text-plugin的一些问题。webpack-concat-plugin
用于concat和uglify文件,不需要是webpack包(用于遗留文件)并注入到html-webpack-plugin。script-ext-html-webpack-plugin
添加async,defer或module属性的<script>元素,甚至他们内联style-ext-html-webpack-plugin
将<link>s 转换为外部样式表,转换为<style>包含内部CSS的元素resource-hints-webpack-plugin
使用<link rel=‘preload’>和添加资源提示以加快初始页面加载速度<link rel=‘prefetch’>preload-webpack-plugin
,用于通过<link rel=‘preload’>帮助延迟加载自动连接异步(和其他类型)的JavaScript块link-media-html-webpack-plugin
允许注入的样式表<link />标签自动设置其媒体属性; 用于提供浏览器有条件下载的特定桌面/移动/打印等样式表inline-chunk-manifest-html-webpack-plugin
用于内联webpack的块清单。默认提取清单和内联<head>html-webpack-inline-style-plugin
,用于使用juice将样式内联到HTML元素。适用于电子邮件生成自动化。html-webpack-exclude-empty-assets-plugin
删除空资产不被添加到html中。这解决了使用webpack 4的extract-text-plugin的一些问题。webpack-concat-plugin
用于concat和uglify文件,不需要是webpack包(用于遗留文件)并注入到html-webpack-plugin。
用法参数
- webpack.config.js文件
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/app.js', //项目入口,根据入口文件查询依赖关系
output: {
path: path.resolve(__dirname, 'dist'), //文件放在当前目录下的dist文件下
filename: 'my-first-webpack.bundle.js' //由webpack打包后生成的文件名称
},
plugins: [
new HtmlWebpackPlugin()
]
};
webpack会字节在目录下生成一个关联了js的HTML文件
可选参数
- 当然,实例一个html-webpack-plugin对象可以传递一些参数进去,作为打包生成文件的参考。
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
title |
{String} |
`` | 用于生成的HTML文档的标题 |
filename |
{String} |
index.html |
要将HTML写入的文件。 默认为 index.html 。 您可以在这里指定一个子目录太(如: assets/admin.html ) |
template |
{String} |
`` | webpack 需要模板的路径。 有关详细信息, 请参阅 文档 |
templateParameters |
{Boolean\|Object\|Function} |
`` | 允许覆盖模板中使用的参数 |
inject |
{Boolean\|String} |
true | true || ‘head’ || ‘body’ || false 将所有资产注入给定 template 或 templateContent 传递 true 或 ‘body’ 所有javascript资源将被放置在body元素的底部。 ‘head’ 将脚本放在head元素中 |
favicon |
{String} |
'` | 将给定的favicon路径添加到输出HTML |
meta |
{Object} |
{} | 允许注入 meta -tags。 例如 meta: {viewport: ‘width=device-width, initial-scale=1, shrink-to-fit=no’} |
minify |
{Boolean\|Object} |
true |
将 html-minifier 的选项作为对象来缩小输出 |
hash |
{Boolean} |
false |
如果true 然后, webpack 为所有包含的脚本和CSS文件 添加唯一的 编译哈希。 这对缓存清除非常有用 |
cache |
{Boolean} |
true |
仅在文件被更改时才发出文件 |
showErrors |
{Boolean} |
true |
错误详细信息将写入HTML页面 |
chunks |
{?} |
? |
允许您仅添加一些块(例如,仅添加单元测试块) |
chunksSortMode |
{String\|Function} |
auto |
允许控制在将块包含到HTML之前应如何对块进行排序。 允许的值是 ‘none’ | ‘auto’ | ‘dependency’ | ‘manual’ | {Function} |
excludeChunks |
{Array.<string>} |
‘’ | 允许您跳过一些块(例如,不添加单元测试块) |
xhtml |
{Boolean} |
false |
如果true将link标记渲染为自动关闭(符合XHTML) |
- 设置生成html的title
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/app.js', //项目入口,根据入口文件查询依赖关系
output: {
path: path.resolve(__dirname, 'dist'), //文件放在当前目录下的dist文件下
filename: 'my-first-webpack.bundle.js' //由webpack打包后生成的文件名称
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
filename: 'admin.html'
})
]
};
- 按模板生成
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/app.js', //项目入口,根据入口文件查询依赖关系
output: {
path: path.resolve(__dirname, 'dist'), //文件放在当前目录下的dist文件下
filename: 'my-first-webpack.bundle.js' //由webpack打包后生成的文件名称
},
plugins: [
new HtmlWebpackPlugin({ // Also generate a test.html
title:"new html",
filename: 'test.html',
template: 'template.html'
})
]
};
可以看到虽然生成了test.html但是存在一些弊端,因为是依照模板,所以不能把模板里的已存在的标签及内容修改。
如果使用插件修改生成的html
同步异步的插件
- Sync
html-webpack-plugin-alter-chunks - Async
html-webpack-plugin-before-html-generation
html-webpack-plugin-before-html-processing
html-webpack-plugin-alter-asset-tags
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit
以html-webpack-harddisk-plugin为例
- 新建一个module:plugin.js
function MyPlugin(options) {
// Configure your plugin with options...
}
MyPlugin.prototype.apply = function (compiler) {
compiler.plugin('compilation', (compilation) => {
console.log('The compiler is starting a new compilation...');
compilation.plugin(
'html-webpack-plugin-before-html-processing',
(data, cb) => {
data.html += 'The Magic Footer'
cb(null, data)
}
)
})
}
module.exports = MyPlugin
- 在webpack.config.js中引入
plugins: [
new MyPlugin({ options: '' })
]
option的值会被传入option修改函数里