git地址：/OnionMister/webpack-demo.git
注：html-webpack-plugin和webpack有版本兼容问题，报错查看：/Kindergarten_Sir/article/details/110083041
webpack打包html插件html-webpack-plugin的使用
1.创建这样的测试目录结构
1）index.html是即将被打包的文件，你可以随便写一些内容
2）index.js是打包的入口文件，你可以写或不写内容
2.webpack.config.js的代码如下：
/*** 压缩html需要插件：html-webpack=plugin* 插件使用方法：下载，引入，使用* loader使用方法：下载，使用*/const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入插件const {resolve} = require('path'); // 使用resolve处理绝对地址const config = {// 入口文件entry: './src/index.js',output: {// 输出文件名filename: 'bundle.js',// resolve处理绝对路径// __dirname代表当前文件的绝对路径，输出文件放到该路径的dist中path: resolve(__dirname, 'dist')},module: {rules: [// loader 配置]},plugins: [// HtmlWebpackPlugin默认功能为创建空的html文件，并引入输出的js文件// 通过配置template将指定文件的所有内容加入到创建的html文件中，会覆盖title配置的内容new HtmlWebpackPlugin({template: './src/index.html'})],// 指定为开发模式mode: "development"};module.exports = config;
3.安装插件html-webpack-plugin到开发环境
cnpm install html-webpack-plugin -D
4.运行打命令
webpack
如果没有装webpack和webpack-cli需要安装一下，代码如下：
cnpm install webpack webpack-cli -D
