webpack4 使用模板生成 html 文件

虽然实际需求肯定不会只做这件事情，但是这篇文章只讲如何把模板文件转换为 html 文件，其他的内容，请移步：

• 编译 sass，压缩，抽离为单独的文件
• 编译、压缩 ES6 语法的 js，抽离公共文件
• 处理其他资源，image 文件，字体文件等

把模板转换成 html 需要两个东西，一个是模板加载器，一个是 html 生成器，我的项目里使用的是腾讯的 art-template 模板，用到的插件如下：

插件	版本	用途
art-template	^4.13.2	模板核心插件
art-template-loader	^1.4.3	模板的 webpack loader
html-webpack-plugin	^4.3.0	生成 HTML 文件的插件

转换的核心插件是 html-webpack-plugin，辅助插件是选用的模板的 loader ，只要配置好了模板相应的 loader，它就可以把任意类型的模板转换为 HTML 文件。而且这个插件默认是支持 ejs 模板的。具体的配置如下：

module: {
    rules: [
		{
            test: /\.art$/,
            include: [resolve('src')],
            loader: 'art-template-loader',
        },
	]
}

plugins: [
	new HtmlWebpackPlugin({
		filename: '[path]/index.html',	// 输出文件，值为 path + filename
		template: 'index.art',	// 模板文件路径
		chunks: ['common']	// 引用的模块，这里的数组内容是 webpack 入口的 键名
	})
]

注意：

1. 模板当中的路径，全部都会根据 webpack 的路径解析规则转换，加载对应的模块，所以如果要处理模板中引用的静态资源，就要配置相应的资源解析的 loader。
2. 插件生成的 html 文件默认会插入所有的打包出来的资源文件，如果有多个页面，那就需要手动配置一下需要引入的资源文件，即在 chunks 里指定需要引用的资源

出现的问题：
模板中的图片资源引用在生成的 html 文件中呈现 src="[object Module]"
解决方案：url-loader/file-loader 配置 esModule: false