webpack5学习笔记-04 webpack使用（2）HTML的打包编译

在上一节中，我们学习了关于webpack中的基本使用，通过配置webpack.config.js，可以实现JS代码的压缩打包功能，这节我们承接上节，开始学习webpack中对于HTML的处理。 在Webpack5中，对HTML的打包操作主要是通过HTMLWebpackPlugin实现的，因此在使用前我们必须进行安装。

HTMLWebpackPlugin的作用

1. 把打包后的JS/CSS自动导入到HTML页面中。
2. 对HTML进行压缩处理。

在webpack.config.js中，我们加入如下代码：

 plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            //打包后文件的名字
            filename:'index.html',
            //是否压缩
            minify:true,
            //指定导入资源的名称
            chunks:[index]
        })
      ]

其中template指定了页面模板的位置，一般路径是src下的index.html。在此基础上运行，在你打包的路径（我用的是dist目录下，就可以找到已经压缩和导入js的HTML文件了）。chunks可以指定导入的名称，当有多个HTML、CSS、JS的文件时，可以只导入指定的资源（默认是全部导入）。