plugin是什么？

pplugin是插件的意思，通常是用于对某个现有的架构进行扩展。

webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别

loader主要用于转换某些类型的模块，它是一个转换器。

lugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程

步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)

步骤二：在webpack.config.js中的plugins中配置插件。

添加版权的Plugin

该插件名字叫BannerPlugin，属于webpack自带的插件。

修改webpac-config.js配置文件

image-20200610211708354

然后重新打包npm run build。查看打包的文件bundle.js。成功在头部加上版权信息

image-20200610212042026

打包html的plugin

目前，我们的index.html文件是存放在项目的根目录下的。

我们知道，在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。

所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件

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

  • 自动生成一个index.html文件(可以指定模板来生成)

  • 将打包的js文件，自动通过script标签插入到body中

安装指定版本的npm install html-webpack-plugin@3.2.0 --save-dev

image-20200610212712905

编写配置文件webpack-config.js

image-20200610213028148

然后重新打包npm run build。查看打包的文件dist目录下的index.html。发现它将打包的js文件，自动通过script标签插入到body中。

image-20200610213159345

但是我们使用了vue所以需要被vue挂载的元素<div id = 'app'></div>我们将根目录下的index.html中的div删除。在通过template选择模板

image-20200610213441815

在配置webpack-config.js文件

image-20200610213540013

以根目录下的index.html为模板生成dist目录下的index.html文件，并自动打包的js文件，自动通过script标签插入到body中。

重新npm run build查看dist目录下的index.html

image-20200610213713490

此时生成了我们想要的div，同时也自动引入了我们打包的js文件。但是由于我们先前为了能使根目录下的index.html能导入dist中的图片，在webpack配置文件中对output中添加的publicPath属性值为’dist/‘。所以我们要将其删除或者注释

image-20200610214008718

重新npm run build查看dist目录下的index.html。并查看效果

image-20200610214129408

image-20200610214149639

js压缩的plugin

在项目发布之前，我们必然需要对js等文件进行压缩处理。这里，我们就对打包的js文件进行压缩

我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

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

image-20200610214337285

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

image-20200610214436697

压缩js，把空格注释删除。所以上文中的版权声明消失了

重新npm run build查看dist目录下的bundle.js。压缩成功

image-20200610214552552

搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

不过它是一个单独的模块，在webpack中使用之前需要先安装它npm install --save-dev webpack-dev-server@2.9.1

image-20200610214841984

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

  • contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist

  • port：端口号

  • inline：页面实时刷新

  • historyApiFallback：在SPA页面中，依赖HTML5的history模式

webpack.config.js文件配置修改如下

image-20200610215057687

我们可以再配置另外一个scripts：dev。–open参数表示直接打开浏览器

dev与webpack-dev-server发生映射，并且通过–open参数，运行后直接打开浏览器

image-20200610215258287

运行npm run dev查看效果

GIF

这时候修改main.js文件查看是否是实时更新。实时更新成功！

GIF1

Webpack配置文件的分离

单个配置文件所造成的问题

随着我们业务逻辑的增多，图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来，进而导致配置文件的增多，使得配置文件书写起来比较繁琐，更严重者（书写特定文件的位置会出现错误）。更由于项目中不同的生产环境和开发环境的配置，使得配置文件变得更加糟糕。

使用单个的配置文件会影响到任务的可重用性，随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。

分离配置文件

我们在根目录下创建build文件夹。创建base.config.js的webpack基础配置文件。将我们之前编写好的webpack.config.js文件复制到这里。并进行修改。

删除了对打包后的js文件的压缩插件，和本地服务器的配置

image-20200610221007557

接着创建一份开发时使用webpack的配置文件dev.config.js在基础配置文件的基础上只需要添加使用本地服务器功能即可

同时我们需要导入插件webpack-merge将我们的base.config.js与dev.config.js合并npm install webpack-merge --save-dev

image-20200610223137028

image-20200610222642208

同理配置生产时使用的webpack配置文件prod.config.js在基础配置文件的基础上只需要添加使用压缩js插件即可。并将其合并

image-20200610223318447

配置package.json

配置文件完成分离之后，我们需要配置package.json的script脚本。通过--config指定运行指定的webpack配置文件

image-20200610223533005

测试使用npm run dev运行我们配置的webpack开发时的配置文件。

image-20200610223725280

成功启动了配置好的本地服务器。