html-webpack-plugin文档

安装

npm i -D html-webpack-plugin

参数	类型	默认值	描述
title	String	Webpack App	用于生成html的head.title
filename	String	index.html	默认输出的文件名,可以自定义,如: "dist/demo.html"
template	String	''	文件相对于webpack配置的路径(绝对或相对),默认值是: "src/index.ejs"(如果存在)
templateContent	string/Function/false	false	提供html模板,将此模板替换到输出的html文件里
templateParameters	Boolean/Object/Function	false	允许将指定的内容替换为自定义的内容
inject	Boolean/String	true	取值范围:`true/'head'/'body'/false`,`true`或`'body':`表示追加到`html.body`末尾,`'head':`表示注入到`html.head`中,`false`表示禁用
scriptLoading	blocking/defer	blocking	现代浏览器加载js的方式,使用`defer`来提高页面启动性能。
favicon	String	''	配置`favicon路径`,来输出到html
meta	Object	{}	允许注入mete元信息.
base	Object/String/false	false	注入基本tag. 如:`base:"https://example.com/path/page.html`
minify	Boolean/Object	生产模式:true,其他模式:false	控制以何种方式来压缩输出。false表示不压缩
hash	Boolean	false	通过hash方式来减小缓存影响
cache	Boolean	true	是否启用缓存
showErrors	Boolean	true	编译出错时是否将错误信息写入到输出的html
chunk	?	?	细化chunk配置
chunksSortMode	String/Function	auto	配置chunk输出到html前的排序规则. 取值范围:`'none'/ 'auto' / 'manual'/ Function`
excludeChunks	Array.<string>	``	设置chunk的排除规则
xhtml	Boolean	false	是否开启标签自闭合

单页面示例配置

{
  ...
  plugins: [new HtmlWebpackPlugin()]
  ...
}

多页面示例配置

{
  ...
  plugins: [
    new HtmlWebpackPlugin({ // 默认页面
      filename: 'index.html',
      template: 'src/assets/index.html'
    }),
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
  ...
}

webpack多页应用配置

摘录一些常用的属性说明:

title

webpack.config.js

new HtmlWebpackPlugin({
  title: 'My App',
  filename: 'assets/admin.html'
})

index.html

<html>
  ...
    <title><%= htmlWebpackPlugin.options.title %></title>
  ...
</html>

输出

<html>
  ...
    <title>My App</title>
  ...
</html>

filename

配置输出html的名称和路径.
1 如果不指定路径,html将直接output.path配置的路径下,如: ('./build'目录)
2 指定路径后将会输出到output.path下,并创建相应目录,如:

const {resolve} = require('path')
module.exports = {
  output: {
    filename: 'build.js', // 输出文件名
    path: resolve(__dirname, 'build') // 输出路径
  },
  ...
  plugins:[
    new HtmlWebpackPlugin({
      filename:'assets/index.html'
    })
  ]
  ...
}

将会输出到

./build/asstes/index.html

template

根据指定模板编译输出内容到目标html

伪代码如下:

const {resolve} = require('path');
module.exports = {
  ...
  plugins:[
    new HtmlWebpackPlugin({
      ...
      path: 'index.html',
      template: resolve(__dirname,'../src/index.html'),
      ...
    })
  ]
}

templateContent

1 以html字符串的方式代替template模板
2 templateContent优先级高于template,当templateContent与template配置同时存在时,以templateContent为准.

const {resolve} = require('path');
module.exports = {
  ...
  plugins:[
    new HtmlWebpackPlugin({
      ...
      path: 'index.html',
      templateContent: ({htmlWebpackPlugin}) => `
        <html>
          <head>
            ${htmlWebpackPlugin.tags.headTags}
          </head>
          <body>
            <h1>Hello World</h1>
            ${htmlWebpackPlugin.tags.bodyTags}
          </body>
        </html>
      `,
      ...
    })
  ]
}

inject

配置将一些内容输出到html文档的什么位置: head或body
1 true或'body'时输出到 html.body
2 'head'时输出到 html.head
3 false时不会输出

scriptLoading

设置<script>标签加载js的方式
1 'blocking': 默认模式,会阻塞页面加载,直到加载完成
2 'defer': 延迟加载,需要根据"加载的js是否会改变html文档"的原则来添加

meta

赋予配置添加meta的能力

plugins: [
  new HtmlWebpackPlugin({
      'meta': {
         // 生成: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
         // 生成: <meta name="theme-color" content="#4285f4">
        'theme-color': '#4285f4'
      }
  })
]

plugins: [
  new HtmlWebpackPlugin({
    'meta': {
      // 生成: <meta http-equiv="Content-Security-Policy" content="default-src https:">
      // 等价于这个 http header: `Content-Security-Policy: default-src https:`
      'Content-Security-Policy': { 'http-equiv': 'Content-Security-Policy', 'content': 'default-src https:' },
      // 生成: <meta http-equiv="set-cookie" content="value; expires=date; path=url">
      // 等价于这个 http header: `set-cookie: value; expires=date; path=url`
      'set-cookie': { 'http-equiv': 'set-cookie', content: 'name=value; expires=date; path=url' },
    }
  })
]

minify

1 在生产环境(mode = 'production')默认开启(true),可以不配置minify属性即可使用,但是如果想要自定义,需要显示定义HtmlWebpackPlugin.minify属性
2 非生产环境下,也可以通过下面的配置来进行自定义配置

minify: {
  collapseWhitespace: true, // 是否去除空白字符,包括空格和换行符
  removeComments: true,     // 是否移除注释
  removeRedundantAttributes: true, // 去除冗余属性
  removeScriptTypeAttributes: true,  // 去除script类型属性
  removeStyleLinkTypeAttributes: true,  // 去除style和link类型属性
  useShortDoctype: true // 
}

chunk + excludeChunks

1 chunk: 设置要打包的模块
2 excludeChunks 设置排除的模块

伪代码如下:

chunks: ['app']

excludeChunks: [ 'dev-helper' ]

chunksSortMode

html-webpack-plugin

html-webpack-plugin文档

安装

webpack多页应用配置

title

filename

template

templateContent

inject

scriptLoading

meta

minify

chunk + excludeChunks

chunksSortMode