安装插件

  • 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文件

Webpack——html-webpack-plugin 插件

可选参数

  • 当然,实例一个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 将所有资产注入给定 templatetemplateContent传递 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'
        })
    ]
};

Webpack——html-webpack-plugin 插件

  • 按模板生成
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'
        })
    ]
};

Webpack——html-webpack-plugin 插件

可以看到虽然生成了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修改函数里

分类:

技术点:

相关文章: