什么是plugin?
- plugin是webpack的插件,对现有的框架进行拓展,是为了方便人们使用。比如非常常见的vscode插件,chrome插件
webpack的插件有哪些功能呢?只有你想不到,没有开发者做不到,今天就来介绍几个常见的plugin
添加版权plugin
Name: BannerPlugin webpack自带的plugin作用: 为打包的文件添加版权声明以下是webpack.config.js文件的配置
- 首先引入webpack这个包,因为是自带的plugin。 但vscode里配置好插件后直接使用也会自动帮你引入
- 再plugins中声明这个插件
BannerPulgin中的字符就是要添加的文字
打包html的plugin
为什么要用这个插件
- 我们在真实项目中,发布的是dist文件夹中的内容,但是dist文件夹中没有index.html文件就发布个寂寞了
- 所以,我们需要将index.html文件打包到dist文件夹中,这个时候就需要用到这个插件HtmlWebpackPlugin可以为我们做什么
- 自动生成一个index.html文件(可以由指定模板来生成)
- 将打包的js文件,自动通过script标签插入到body中,也就是说,我们之前要手动写的script标签也不需要了
安装
npm install html-webpack-plugin --save-dev (开发依赖) 版本 ^3.2.0
修改webpack.config.js配置
因为之前用file-loader打包图片时修改了路径,所以这里需要将路径改回来。 因为index文件和bundle.js已经在一个文件夹里了,如果不该src路径会出问题,找不到js文件。
压缩js减少大小的plugin
目的:
- 减少js大小,提高浏览器执行速度
安装:
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev 与cli2保持一致的版本号
修改webpack.config.js文件: