WRM
0%

html-webpack-plugin的使用（将HTML文件进行打包）

发表于 分类于

1.需要用到HtmlWebpackPlugin插件，实现的功能主要有以下两点：
（1）自动生成一个index.html文件（可以指定模板生成）
（2）将打包的js文件，自动通过script标签插入body元素中

2.安装

1
cnpm install html-webpack-plugin --save-dev

3.使用
修改webpack.config.js文件，添加如下代码

1
const HtmlWebpackPlugin = require('html-webpack-plugin');
1
2
3
4
5
plugins: [
       new HtmlWebpackPlugin({
           template: "index.html"
       })
   ]

在这里插入图片描述
4.执行

1
npm run build

5.填坑
如果出现报错如下
在这里插入图片描述
很可能是安装的html-webpack-plugin的版本的问题，解决方法：
打开package.json,将html-webpack-plugin的版本改为3.2.0
在这里插入图片描述
保存后，执行

1
npm install
1
npm run build

如果成功，dist文件夹下会生成一个index.js文件