85、WebPack 、vue-loader

1、为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器
• ...

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

2、什么是Webpack

• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
• 它还附加了一些更好用的功能。例如：

1. CSS 预处理。将 Less, Sass 编译成css；
2. ES6 语法 转成 ES5 ；
3. 减少io请求。通常我们在请求后，会返回一个html到浏览器。这时，我们如果打开控制台，就会发现在html页面通过script,link等标签引用的静态资源， 浏览器会再次发出请求去获取这些资源。但是webpack的打包，将所有的静态资源都合并好了，减少了io请求。

Webpack的工作方式：把你的项目当做一个整体，通过一个给定的主文件（如：main.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。（Webpack能打包更多不同类型的文件。）

 

 3、vue-loader

Webpack把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等通过合适的loader都可以被处理。

（1）loader的作用：Webpack本身只能处理 js模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。  loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。（loader支持同步和异步）

（2）引入方式：Loader 可以在require()引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。 

（3）vue-loader作用：

1. 在Vue开发中，有.vue文件，vue-loader就是用来加载这类文件的，进行预处理。
2. 提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template；
3. 再分别把他们交给对应的loader去处理。例如，css-loader：加载由vue-loader提取出的CSS代码；vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的jacascript代码；
4. 然后再通过webpack打包编译成我们浏览器认识的代码。

（4）常用的loader加载器

1. css-loader 处理css中路径引用等问题 
2. style-loader 动态把样式写入css 
3. sass-loader scss编译器 
4. less-loader less编译器 
5. vue-loader 解析和转换.vue文件

（5）以转换处理 SCSS 文件为例子：

1. SCSS 源代码会先移交给 sass-loader 把 SCSS 转换成 CSS；
2. 再把输出的 CSS 交给css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；
3. 把输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码；

 可以看出以上的处理过程需要有顺序的链式执行，先 sass-loader 再 css-loader 再 style-loader。