写在后面
为了更好的阐明，咱们模拟Vue.js开发了一个相似的简化版本的前端框架Quick Paper(文档) 来帮忙你了解一些细节。因而在开始之前，让咱们先大抵理解一下此我的项目的构造，不便后续形容。
舒适提醒：咱们举荐你在开始之前去Github上把此我的项目clone下来后，对照着源码进行学习！
目录构造
其实你只须要关注上面四个文件夹：
- src：框架源码；
- loader：相似vue-loader，用来解析.paper文件的loader；
- style-loader：和下面的一样，只不过这个是用来解析款式文件的（包含.css文件和.paper文件中的style标签局部）；
- loader-plug：一些辅助性能，比方校对webpack的一些配置。
框架源码
接着，咱们对源码src局部的目录构造再略微开展一下（因为咱们这里的重点不是源码局部，而是那些loader或plug是如何配置实现一系列解析工作的，因而源码局部就在上面简略的阐明就点到为止）。
core：框架对象的根底代码
- global-api：给框架对象挂载的全局办法
instance：框架对象
- index.js：框架对象运行入口
- init.js：负责对象的初始化相干工作
- lifecycle.js：负责对象的生命周期治理
- render.js：对象的渲染启动等方面的工作
- observe：监听数据扭转办法（被框架对象应用）
- vnode：虚构DOM相干代码（被框架对象应用）
- module：为框架对象扩大内置指令，组件等的中央
- tools：一些工具办法，因为复用性和方便管理，集中写在一起
- index.js：打包入口文件，也就是这份文件把所有的资源整合成一个残缺的框架
所以从下面的代码就可以看进去，文件src/core/instance/index.js是对象自身，从这个文件开始开即可！
如果有什么不分明的，能够去issue给咱们留言。
Loader和执行程序
对于咱们用于学习的我的项目Quick Paper而言，咱们是把代码整合到文件.paper中去，文件构造大抵如下：
<template> <!-- 页面的元素在这里 --></template><script> // 逻辑控制代码在这里 export default { };</script><style> /* 在这里编辑款式代码 */</style>你想，咱们应用webpack打包我的项目的时候，他是不可能意识.paper文件的，当然就无奈晓得如何解析下面这份文件了，而开发一个loader用以解析下面的文件，就是这里要阐明的。
loader
在阐明loader之前，咱们先要看看咱们编辑的.paper是如何被咱们应用的。因为如何应用就决定了咱们须要如何解析。
和vue相似，先假如咱们有一个App.paper文件：
import App from './App.paper';new QuickPaper({ render:createElement => createElement(App), // ...});因为render外面只记录了页面内容，可是.paper文件外面可是记录了页面内容+逻辑管制+页面款式的。其余的内容怎么办？
// 导入js [逻辑管制]import script from './${filename}?QuickPaper&type=script&lang=js&hash=${id}&';// 导入css [页面款式]import './${filename}?QuickPaper&type=style&lang=css&hash=${id}&';script.render=${code};// [页面内容]export default script;能够看进去，页面内容间接默认导出后给render配置项即可，别的内容因为新增了导入语句，会触发对应的loader进行解析，也就是说，这里其实能够分为两步：
- 第一步：对于未思考到的内容执行新的导入语句，触发对应的loader解析
- 第二步：导出render须要的内容
style-loader
比方页面款式局部的导入语句：
import './${filename}?QuickPaper&type=style&lang=css&hash=${id}&';咱们是如何让webpack晓得这是一个款式文件，并且是应用css还是scss或别的loader来解析的，这属于插件须要阐明的局部。在此之前，咱们还须要先阐明一下款式loader的工作原理。
为什么款式loader比拟非凡？
依据返回值类型，能够把loader分成两种：一种是返回js代码（也就是一个模块的代码，有相似module.export语句）的loader，一个是不能作为最右边loader的其余loader(比方返回一个CSS字符串)。
咱们来看看咱们webpack外面是如何配置css的loader的：
{ test: /\.css$/, loader: ['quick-paper/style-loader/index.js', 'css-loader', 'postcss-loader']}这里的重点是css-loader，他属于第一种，返回js代码的loader，对于咱们自定义的'quick-paper/style-loader/index.js'而言，如果让loader依照从右往左的程序执行，很难拿到真正的css代码。
执行程序（loader和picth）
在阐明如何解决上个问题前，咱们须要先阐明一下loader的picth和执行程序。
比方下面配置的三个loader而言，执行程序分为Pitch阶段和Normal阶段（能够了解为loader自身的行为）：
- Pitch阶段：'quick-paper/style-loader/index.js'->'css-loader'->'postcss-loader'
- Normal阶段：'postcss-loader'->'css-loader'->'quick-paper/style-loader/index.js'
有一个特点是，在Pitch阶段，如果某个loader有返回值，就会进行后续执行。
舒适提醒：进行执行的意思是，在其左边的loader，包含本人都执行结束了（Pitch阶段和Normal阶段都完结了），返回的值会返回给前一个loader(Normal阶段)！
如何实现？
这里，咱们就能够借助给'quick-paper/style-loader/index.js'设置一个有返回值的Pitch来实现。
看看代码构造：
// quick-paper/style-loader/index.jsconst loaderApi = () => { };loaderApi.pitch = function (remainingRequest) { // request = ""!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/src/in... let request = loaderUtils.stringifyRequest(this, '!!' + remainingRequest) return ` // 获取真正的css内容 var content = require(' + request + '); // 而后调用办法增加到页面中失效 require('./addStylesClient.js')(content); `;};module.exports = loaderApi;咱们在'quick-paper/style-loader/index.js'中定义了Picth办法，在此办法外面，返回了一个js字符串，我的项目运行的时候会运行这段字符串，这段字符串的意义就是调用款式loader获取真正的css后，运行addStylesClient.js办法使得在页面失效。
舒适提醒：对于addStylesClient.js办法请间接查看我的项目源码，很容易读懂，给款式增加hash值让scope失效，就是这个办法里。
插件的作用和一些技巧
咱们这里来解释一下，一个.paper文件拆分当前，如何让对应的loader来进行解析。
插件的执行机会
首先须要了解，什么是插件？
你能够这样了解：如果说loader帮忙webpack取得解析更多类型文件，那插件就是一个打杂工，前者有专门的分工，后者是在非凡状况下帮忙，而不是针对某个文件。
比方你能够在每次打包前调用一个查看删除上次打包的后果，或者在打包失败的时候重置一些参数，或者是别的一些操作等。
如何实现？
那么，咱们这里须要插件干什么？
别忘了咱们的需要是（拿css举例子），如果遇到：
import './${filename}?QuickPaper&type=style&lang=css&hash=${id}&';这样的导入语句，咱们工具lang=css发现是一个款式文件，应该交给专门解析css的loader解决，当然，咱们能够被动批改webpack的配置：
{ test: /type=style&lang=css/, loader: ['quick-paper/style-loader/index.js', 'css-loader', 'postcss-loader']}可是，为了更简略，咱们能够通过插件，在每次打包前对loader配置进行批改（当然，也包含js等相干项），如此，便实现了。