Webpack4系列教程(二) HTML相關配置

寫在前面

在這篇部落格中，我將會介紹webpack4中有關html部分的相關配置

在上篇文章中，我已經介紹了output是打包的入口，但是我們知道打包後的檔案是js檔案，而我們訪問網站的時候首先訪問的是html檔案。我們當然可以在打包後的資料夾裡（這裡是dist目錄）建立一個html檔案，然後把打包好的js掛載到html上。但我們不必這樣做，藉助一個html外掛即可完成

html-webpack-plugin

安裝好外掛後我們引入html-webpack-plugin：const HtmlPlugin = require('html-webpack-plugin');
並在plugins裡配置這個外掛

new HtmlPlugin({
	template: './src/index.html',  //模板檔案
	hash: true, //是否帶雜湊值
	filename: 'index.html' //生成檔案的檔名
})

我們執行打包命令後，目錄結構如下

我們開啟生成的html檔案，發現已經掛載了js檔案

clean-webpack-plugin

我們修改下output的配置，讓生成的js檔名不固定

output: {
	path: path.resolve('dist'),
	filename: '[name].[hash:5].bundle.js'
},

當我們修改了index.js中的內容重新打包後

我們發現原來的檔案並沒有刪除，我們希望每次打包前都將dist目錄刪除，clean-webpack-plugin外掛可以實現這一需求，我們在plugins中進行配置new CleanPlugin('dist'),