webpack-plugin的使用

webpack-横幅plugin的使用

认识plugin

plugin是什么？
plugin是插件的意思，通常是用于对某个现有的框架进行扩展。
webpack中的插件，就是对wenpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin的区别：
loader主要用于转换某些类型的模块，它是一个转换器和加载器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js 中的plugins中配置插件

添加版权的plugin

一个最简单的插件，为打包的文件添加版权声明
该插件名字叫BannerPlugin,属于webpack自带插件
按照下面的方法来修改webpack.config.js的文件：

重新打包程序，查看bundle.js文件的头部，看到如下信息：

打包html的plugin

index.html文件存放在项目的根目录下
在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。
所以，需要将index.html文件打包到dist文件中，这个时候就可以使用HtmlIWebpackPlugin插件。
HtmlIWebpackPlugin插件可以为我们做这些事情：
1.自动生成一个index.html文件。（可以指定模板来生成）
2.将打包的js文件，自动通过script标签插入到body中。

安装HtmlIWebpackPlugin插件：

npm install html-webpack-plugin --save-dev

使用插件，修改webpack.config.js文件中plugins部分的内容如下：

由于我的有错误所以并没有弄好，错误如下，好像这个错误是跟国内下载npm install有关，所以好像要把node_module删除之后重新下载重新下载，

js压缩Plugin

在项目发布之前，必须要对js等文件进行压缩处理
这里，就对打包的js文件进行压缩处理
使用一个第三方插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致。

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.conifg.js文件，使用插件：

查看打包后的bundle.js文件已经是被压缩过的了。