plugin

一 plugin是什么？

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

二 loader和plugin区别

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

三 plugin的使用过程：

• 步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
• 步骤二：在webpack.config.js中的plugins中配置插件。 下面，我们就来看看可以通过哪些插件对现有的webpack打包过程进行扩容，让我们的webpack变得更加好用。

四,为打包的文件添加版权声明的plgin- BannerPlugin

BannerPlugin，属于webpack自带的插件。

按照下面的方式来修改webpack.config.js的文件：

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

五 打包html的plugin

目前，我们的index.html文件是存放在项目的根目录下的。而在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。 所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以为我们做这些事情：

• 自动生成一个index.html文件(可以指定模板来生成)
• 将打包的js文件，自动通过script标签插入到body中安装HtmlWebpackPlugin插件

安装HtmlWebpackPlugin插件 npm install html-webpack-plugin --save-dev

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

• 这里的template表示根据什么模板来生成index.html,我们这里以index.html为模板
• 另外，我们需要`删除之前在output中添加的publicPath属性,否则插入的script标签中的src可能会有问题

六js压缩的Plugin

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

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

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

七 搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块，在webpack中使用之前需要先安装它 npm install --save-dev webpack-dev-server@2.9.1

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： - contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist - port：端口号 - inline：页面实时刷新 **- historyApiFallback：在SPA页面中，依赖HTML5的history模式 webpack.config.js文件配置修改如下：

我们可以再配置另外一个scripts：--open参数表示启动本地服务器后直接打开浏览器,无需再手动ctrl+点击8080链接

如果我们想要运行的话,可以在package.json里进行配置快捷脚本命令,这个命令就可以让我们快速启动一个本地服务