7、vue终极使用

vue终极使用其实就是以后要将组件写到xxx.vue文件中并导出，在其他js文件中使用组件的时候只需要将组件导入即可。

8、plugin的使用

8.1 什么是plugin

plugin是插件的意思主要用于对现有的某个插件进行扩展。webpack中的插件就是对webpack的功能进行扩展。

loader和plugin的区别在于loader是个格式转换器，是将浏览器不认识的格式转换为浏览器认识的格式，而plugin是插件是对webpack的扩展。

8.2 plugin的安装和配置

8.2.1、添加版权的plugin

8.2.2 HtmlWebpackPlugin

项目发布的时候是发布的dist文件夹里面的东西，但是dist文件夹中是没有index.html文件的。该插件的作用是将index.html文件发布到服务器上。此时就用到了HtmlWebpackPlugin插件。

HtmlWebpackPlugin插件可以为我们干哪些事情？

1.自动生成index.html文件（可以指定模板生成）

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

要想使用该插件需要先安装该插件：

插件安装完成之后需要修改配置文件webpack.config.js：

（1）导入依赖

（2） 在下面的module中的plugin对象中添加如下代码：

（3）程序打包

然后就能看到在dist文件夹中自动生成的index.html文件

此时在src下面的index.html文件中就不需要引入bundle.js文件了。但是模版也需要加载到dist文件夹中的index.html文件中。

因此需要在配置文件中添加如下：

（4）为dist文件下的index.html文件添加模板

重新打包后观察dist文件下的index.html文件会发现app模板被引入了。

8.2.3 uglifyjsWebpackPlugin

该插件是用来压缩bundle.js文件的。使用步骤和其他的插件是一样的。但是在开发阶段是不建议使用的。

（1）安装插件

（2）修改配置文件

(3)打包

查看bundle.js文件：

9、搭建本地服务器（实时刷新代码）

在之前编写代码的时候几乎每一步查看效果都需要我们重新打包并运行，webpack提供了解决方案，在项目没有发布之前先将项目保存到内存中，并监听代码，当代码发生修改的时候将修改的代码存储到磁盘中，在浏览器上运行的时候直接读取内存中的数据就行了。

（1）下载插件

（2）修改配置文件

（3）在webpack.json文件夹中配置当前项目运行指令

（4）在终端执行指令

然后写代码的时候都会实时刷新。

10、webpack配置文件的分离

配置文件的抽离是指将项目运行时的配置文件和项目发布时的配置文件分开。配置文件的分离在脚手架中会使用。

（1）新建文件夹build，在该文件夹下面创建如下三个js配置文件。

base.config.js文件：公共的配置文件。

dev.config.js文件：开发时使用的配置文件。

prod.config.js文件：生产时使用的配置文件。

（未完待续……）