webpack html插件,自学 webpack4.x 基础篇之 html插件（适合小白）

1.前言

基础的配置咱们上一章已经学完，相信大家也学会了，在咱们上次学习的时候学到打包之后的文件夹里面只有 js 文件，当我们启动开发服务访问服务地址的时候只会进入到 build 目录下面，这个时候我们还得在打包文件中新建一个 index.html 文件，这样太麻烦了，那么，能不能够在我们的 src 目录下面建立一个 html 模板文件，打包的时候直接将 html 文件也打包到 build 目录下面呢？那么，就让我们学习一下 html的插件。

我们先在 src 目录下面新建一个 index.html 文件，用于当作模板文件

2.安装 html 插件 (html-webpack-plugin)

yarn add html-webpack-plugin -D 执行这条命令来安装 html 插件。

3.配置插件

安装好插件之后，我们是需要进行配置的，一说到配置，当然是进入到我们的配置文件中进行配置了。

进入配置文件，首先要 引入我们刚才安装的 html 插件let HtmlWebpackPlugin = require("html-webpack-plugin") //引入 htmlwebpack 插件

引入之后，就是配置我们的插件了：//插件的配置

plugins: [ //数组， 放着所有的 webpack插件

new HtmlWebpackPlugin({

template: './src/index.html', //模板文件(html文件)的位置

filename: 'index.html', //打包后的文件名字

})

],

现在我们的配置文件是这个样子的

那么，现在我们来执行一下打包命令看一下结果：npm run build

现在，在我们的 build 目录下有一个 index.html 文件，并且这个 html 文件它自动的引入了打包后的 js文件，现在应该明白这个 html 插件了吧！

现在，在我们的 build 目录下有一个 index.html 文件，并且这个 html 文件它自动的引入了打包后的 js文件，现在应该明白这个 html 插件了吧！

4.压缩 html 文件 和 生成 hash 戳

从上图我们可以看到，现在的html并不是压缩的，想要压缩的话我们还需要配置：plugins: [ //数组， 放着所有的 webpack插件

new HtmlWebpackPlugin({

template: './src/index.html', //模板文件(html文件)的位置

filename: 'index.html', //打包后的文件名字

minify: { //压缩 html 文件

removeAttributeQuotes:true, //删除属性的双引号

collapseWhitespace:true //折叠空行，变成一行

},

hash: true,

})

],

加上上面的配置之后，在让我们来看一下：(执行 npm run build )

大家可以看到，现在 html 已经被压缩了，并且生成了 hash 戳。

举报/反馈