自学 webpack4.x 基础篇---webpack 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 插件了吧！

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 戳。