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