模板html文件

html-webpack-plugin

配置模板html

// 通过 npm 安装
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 以src下得main.js作为入口文件
  entry: resolve(__dirname, 'src', 'index.js'), 
  output: {
    path: resolve(__dirname, 'dist'), // 输出的文件路径
    filename: 'bundle.js' // 输出的文件名
  },
  plugins: [
    // 不指定配置的话，插件自动生成一个空的html，以便插入打包后的bundle.js
    new HtmlWebpackPlugin(
      {
        title: '', // 设置title
        template: ''. // 设置模板html
      }
    )
  ],
  mode: 'development'
}

HtmlWebpackPlugin 将所有的chunk 插入到 html中

options 参数配置

html-webpack-plugin # option

template 模板html（不传的话自动生成一个空的html）
title 设置标题
filename 设置生成的文件名和路径
templateContent
inject：枚举值：boolean | 'head' | 'body'，表示到底插入到哪里
publicPath：公共路径替换
scriptLoading: 打包的script chunks是通过什么方式引入，枚举值：'blocking' | 'defer' | 'module'
favicon: favicon的路径
关于 chunks 的插入（默认是全部插入的）
- chunks：期望一个数组，匹配到的chunks 被插入这个 html
- excludeChunks：期望一个数组，匹配到的chunks 不被插入这个 html
- chunksSortMode: 根据自己的规则过滤返回 chunks
html-webpack-plugin是自带模板渲染语法的，可以参考官方文档，vue和react的cli中都有使用到

多页面搭建

let plugins: [
  ...plugins,
  new HtmlWebpackPlugin({
    filename: 'index.html',
    title: 'index',
    chunks: ['index.js']
  }),
  new HtmlWebpackPlugin({
    filename: 'second.html',
    title: 'second',
    // 设置chunks为 当前页面需要的 chunks
    chunks: ['second.js']
  })
]

每次 new HtmlWebpackPlugin 代表生成一个html文件，默认的每个html模板都是全量的chunk插入到html。

如果你需要细分不同的页面的话，就需要像上面一样手动的配置，当前这个html接受那些 chunks。

处理html的其它资源

html-loader

你可能会在html引入一些src下的资源，比如 link-css、script-file、img-src等等资源，html-loader能够直接的帮你进行处理：

let rules = [
  {
    test: /\.html$/,
    use: 'html-loader'
  }
]

其实到这里并没有完全解决问题，因此打包的资源都是一段hash命名的文件，而且是直接的丢在了build目录下，并且这些资源仍然无法模块化。如果需要做到细分解决这些问题的话，请参考《打包资源模块》

html-loader作为html的翻译官，能力其实非常强大（请参考html-loader的options配置）：

解决模板引擎的html文件（需要手动安装对应的解析引擎）
压缩
处理一些资源的时候把对应的 attribute加上

压缩html

html-webpack-plugin在生产环境下，默认是压缩html的。如果需要做一些细节上的操作，可以找 html-webpack-plugin 的配置：移除空格、移除注释等等

总结

由于webpack、plugin和loader都不是分别由不同的团队维护和编写，一些配置并没有统一标准化。比如
- filename有些是可用直接的包括路径，有些却只能是文件名
- [ext] 后缀，有些 filename 不提供这个替换字符串，或者 [ext] 不一定包含点符号

本篇内容对应 code-example/01-day 的代码

01-模板html文件