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'),