plugin是什么?
1.plugin是插件的意思,通常是用于对某个现有的架构进行扩展。
2.webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
loader和plugin区别
loader 主要用于转换某些类型的模块,它是一个转换器。
plugin 是插件,它是对webpack本身的扩展,是一个扩展器
1.plugin的使用过程:
步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二:在webpack.config.js中的plugins中配置插件
案例 : 添加版权的Plugin
配置webpack.config.js
然后重新打包即可:
npm run build
成功之后 就会出现版权:
2.打包html的plugin
目前,我们的index.html文件是存放在项目的根目录下的。
我们知道,在真实发布项目时,发布的是dist
文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js
等文件也就没有意义了。所有,我们需要将index.html文件打包到dist
文件夹中,这个时候就可以使用HtmlwebpackPlugin
插件。
HtmlWebpackPlugin插件可以为我们做这些事情:
1.自动生成一个index.html
文件(可以指定模板来生成)
2.将打包的js文件,自动通过script
标签插入到body
中。
webpack@3.6.0 对应的如下操作
安装HtmlWebpackPlugin插件
npm install html-webpack-plugin@3.2.0 --save-dev
使用插件,修改 webpack.config.js
文件中的plugins
部分的内容如下:
这里的template表示根据什么模板来生成index.html
另外,我们需要删除之前在output
中添加的publicPath
属性,否则插入的script
标签中的src
可能会有问题
然后打包即可:(根据自己在package.json文件中scripts设置的方式来启动)
npm run build
自动生成的结构图:
3.js压缩的Plugin
在项目发布之前,我们必然需要对js等文件进行压缩处理
这里,我们就对打包的js文件进行压缩。我们使用一个第三方的插件uglifyjs-webpack-plugin
,并且版本号指定1.1.1,和CLI2
保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js文件,使用插件:
然后打包即可:(根据自己在package.json文件中scripts设置的方式来启动)
npm run build
打包成功之后js压缩成如下图: