webpack打包中的vue-loader及其依赖插件vue-style-loader

  今日在做性能优化，有的同事提出在PC端chrome浏览器上使用dev-tools测试时，有个addStylesToDom()函数耗时很长，于是就这部分我进行了资料查询和分析，结果如下：
  光就本问题而言，其实对于我们的项目是没有任何影响的，原因是项目最终上维护的是webpack打包出来的静态static文件+index.html，而这个接口所属插件并不会被最终的静态文件使用，只是在PC端Web上开发时才使用到，因为我们需要调试代码，必须要实现热重载功能，否则代码调试需要反复打包，这个时间成本太高。
  但是咱需要尽量多了解下这个原理，以及为什么npm run dev和npm run build都能实现热重载，但是build不会实时编译呢。针对项目情况，分析结果如下：
  首先来看问题中提到的接口所在的文件，其路径为node_modules\vue-style-loader\lib\addStylesClient.js，他是属于插件vue-style-loader的。
  **Vue-style-loader:**

该插件作为vue-loader的依赖项存在。如果代码中需要把.vue文件中的CSS解析为单独的文件，则需要安装此依赖插件，否则在初始化的时候会报错。
1）安装方法：
如果是 常规 的，执行 npm install stylus-loader css-loader style-loader --save-dev 安装依赖就行。
如果是 less 的，执行 npm install less less-loader --save-dev 安装依赖就行。
如果是 sass 的，执行 npm install sass sass-loader --save-dev 安装依赖就行。或者（$npm intall sass-loader --save ; $npm install node-sass --save）
2)vue-loader的功能和作用：
vue-loader是webpack的一个loader加载器，用于处理编写的.vue文件。在.vue文件中，我们使用、

这两个命令的本质区别在于二者实现开启服务器的方式不同，run dev使用的是webpack的dev-server，而run build使用的是node.js的express服务器。
一方面，dev server也是一个轻量级的node.js express服务器，实际上相当于是一个封装好的express的http服务器+调用webpack-dev-middleware ,当源文件改动后，会进行实时编译，再用webpack-dev-middleware将编译后文件输出到内存中，进行实时渲染页面（扩展：这种渲染也可以用webpack-dev-middleware+webpack-hot-middleware来代替）

另一方面我们从上面代码能看出，run dev中需要执行的插件比run build多很多，Run build由于是用在TV上的，不需要我们调试，所以即便打包时间比较长也是可以接受的，而run dev我们希望达到的效果是不必每次更改代码，都重新进行一次打包，实现页面热加载即可，其打包集成度不高，所以需要再引入多个插件。而且build之后得到的渲染页面的为静态static文件，而dev则需要从入口开始执行，同时引入插件支持，实现热加载。所以启动server执行的配置文件是build/webpack.dev.conf.js，专门为dev配置的config文件。（这部分理解还需要更深一步加强）

扩展：

使用express服务器 结合其他的中间件来响应http请求及其他的功能，扩展性更好，较为灵活。这种方式下的编译命令常见的是：
“dev”: “node build/dev-server.js”,
意思是：运行”npm run dev”的时候执行的是build/dev-server.js文件；
其中，中间件是一个函数，用于访问请求对象、响应对象和web应用中处于请求－响应循环流程中的中间件。它的功能包括：执行任何代码、修改请求和响应对象、终结请求－响应循环和调用堆栈中的下一个中间件。

扩展留档记忆：引用文章https://www.cnblogs.com/hl0203/p/7138600.html

build文件夹分析

build/dev-server.js

npm run dev 执行的文件build/dev-server.js文件，执行了：
检查node和npm的版本
引入相关插件和配置
创建express服务器和webpack编译器
配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
挂载代理服务和中间件
配置静态资源
启动服务器监听特定端口（8080）
自动打开浏览器并打开特定网址（localhost:8080）
说明： express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

build/webpack.base.conf.js

dev-server依赖的webpack配置是webpack.dev.conf.js文件，
测试环境下使用的是webpack.prod.conf.js
webpack.dev.conf.js中又引用了webpack.base.conf.js
webpack.base.conf.js主要完成了下面这些事情：
1.配置webpack编译入口
2.配置webpack输出路径和命名规则
3.配置模块resolve规则
4.配置不同类型模块的处理规则
这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则，如果需要处理其他文件可以在module.rules里面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：
将hot-reload相关的代码添加到entry chunks
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件

build/check-versions.js和build/dev-client.js

最后是build文件夹下面两个比较简单的文件，
dev-client.js似乎没有使用到，代码也比较简单，这里不多讲。
check-version.js完成对node和npm的版本检测
build/utils.js和build/vue-loader.conf.js
webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件，utils主要完成下面3件事：
配置静态资源路径
生成cssLoaders用于加载.vue文件中的样式
生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-loader.conf

则只配置了css加载器以及编译css之后自动添加前缀。
build/build.js
构建环境下的配置，
build.js主要完成下面几件事：
loading动画
删除创建目标文件夹
webpack编译
输出信息

build/webpack.prod.conf.js

构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情：
合并基础的webpack配置
使用styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置

webpack-bundle分析

说明： webpack插件里面多了丑化压缩代码以及抽离css文件等插件。
config文件夹分析
config/index.js
config文件夹下最主要的文件就是index.js了，
在这里面描述了开发和构建两种环境下的配置，前面的build文件夹下也有不少文件引用了index.js里面的配置。
config/dev.env.js、config/prod.env.js和config/test.env.js
这三个文件就简单设置了环境变量而已，没什么特别的。