从vue-loader开始理解webpack的一些设计思想
写在前面
为了更好的说明,我们模仿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.js
const 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等相关项),如此,便实现了。
转载自:https://segmentfault.com/a/1190000039234338