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

最新推荐文章于 2024-07-22 21:02:18 发布

帕尼尼0_0

最新推荐文章于 2024-07-22 21:02:18 发布

阅读量314

点赞数

分类专栏： Webpack系列文章标签： webpack

本文链接：https://blog.csdn.net/Nate__River/article/details/85172177

版权

9 篇文章 0 订阅

订阅专栏

在这篇博客中，我将会介绍webpack4中有关html部分的相关配置

在上篇文章中，我已经介绍了output是打包的入口，但是我们知道打包后的文件是js文件，而我们访问网站的时候首先访问的是html文件。我们当然可以在打包后的文件夹里（这里是dist目录）创建一个html文件，然后把打包好的js挂载到html上。但我们不必这样做，借助一个html插件即可完成

安装好插件后我们引入html-webpack-plugin：const HtmlPlugin = require('html-webpack-plugin');
并在plugins里配置这个插件

new HtmlPlugin({
	template: './src/index.html',  //模板文件
	hash: true, //是否带哈希值
	filename: 'index.html' //生成文件的文件名
})

我们运行打包命令后，目录结构如下

在这里插入图片描述

我们打开生成的html文件，发现已经挂载了js文件
在这里插入图片描述

我们修改下output的配置，让生成的js文件名不固定

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

当我们修改了index.js中的内容重新打包后
在这里插入图片描述
我们发现原来的文件并没有删除，我们希望每次打包前都将dist目录删除，clean-webpack-plugin插件可以实现这一需求，我们在plugins中进行配置new CleanPlugin('dist'),

关注