常见插件[plugin]使用---clean、html、copy

150 阅读1分钟

一. clean-webpack-plugin

2249.png

该插件是用来在进行新一次的打包前,先清除上一次打包生成的文件。因为如果不清楚的话,新的打包结果只会替代重名文件,而对于那些新的打包没有生成的,还会留下!!!这样就会一点一点累计!!!

先引入:

2250.png

再new调用使用:

2251.png

二. html-webpack-plugin

2252.png

该插件是用来自动生成 html 文件【项目打包后的入口文件】,并将打包生成的 js 文件用 script 标签引入进去!!如果我们手动创建 index.html文件的话,每次如果打包后的 js 文件路径或者名字改变,那我们都需要手动去修改,且我们只能在原项目的根目录下创建index.html但如果使用该插件,会自动在我们打包生成的目录下创建 html 文件,此时我们如果要部署上线的话,就只需要上传打包后输出的目录就行!!!!

2253.png

1. 可以指定生成的 html 文件的头部标签内容

2254.png

2. 可以自己创建一个 html 文件的模板,则会按照这个模板生成 html 文件

模板文件:

2255.png

在配置中,通过 template 属性指定该模板文件的位置

2256.png

打包后生成的 html 文件

2257.png

3. 可以生成多个 html 文件,只需多次 new 出该插件的实例即可

2258.png

三. copy-webpack-plugin

该插件负责把一些,不需要转译的静态资源【一般在 public 目录下,如 favicon.ico】直接拷贝到打包后输出的目录中

2259.png