webpack 流程解析 (5) module reslove

2021-10-24
阅读 5 分钟
2.9k
上文说道我们拿到了构建modlule的factory,和依赖等关键数据,通过addModuleTree经过factorizeQueue的控制走到了factory.create。这个时候就开始了reslove过程。本文主要分析,NormalModuleFactory 内部 beforeResolve,factorize,resolve, afterResolve 这几个钩子。

webpack 流程解析(4): 开始构建

2021-10-16
阅读 3 分钟
2.1k
这里触发了make钩子注册的回调,还记得我在初始化部分提到的EntryPlugin吗?在这里注册了一个钩子回调,触发了 compilation.addEntry

webpack 流程解析(3) 创建compilation对象

2021-10-11
阅读 4 分钟
2.5k
webpack初始化完成之后,则会通过传入的options.watch来判断是否要开启watch,如果开启watch则会执行watch的流程,如果是run,则会执行run的流程,本系列只关注主线,所以我们直接从run开始,watch感兴趣的同学可以自行研究研究

webpack 流程解析(2):参数初始化完成

2021-10-08
阅读 5 分钟
3.1k
上文说到 webpack 准备好了参数,要创建 compiler对象了。创建完之后,则会执行 compiler.run 来开始编译,本文将阐述 new Compiler 到 compiler.run()中间的过程。整体过程都发生在createCompiler这个函数体内。

webpack 流程解析(1):小弟先帮我看看对不对之 weback-cli

2021-10-07
阅读 1 分钟
2.2k
compiler对象是一个全局单例,它负责把控整个webpack打包的构建流程。本文将会介绍在 new compiler 之前,webpack做了什么

export default 为何突然没用了?

2020-04-16
阅读 4 分钟
13.5k
export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。

happy pack 原理解析

2019-11-18
阅读 14 分钟
11.2k
本质上, happypack 是用通过 js 的多进程来实现打包加速,需要注意的是,创建子进程和子进程和主进程之间通信也是有开销的,当你的 loader 很慢的时候,可以加上 happypack,否则,可能会编译的更慢!

webpack调优总结

2018-09-21
阅读 6 分钟
5.5k
webpack 的出现为前端开发带来翻天覆地的变化,无论你是用 React,Vue 还是 Angular,webpack 都是主流的构建工具。我们每天都跟它打交道,但却很少主动去了解它,就像写字楼里的礼仪小姐姐,既熟悉又陌生。随着项目复杂度的上升,打包构建的时间会越来越长。终于有一天,你发现npm run dev后,去泡个茶,上了个厕所,跟...

组件库构建过程

2018-06-12
阅读 6 分钟
7.4k
最近在项目内部创建了一个vue组件库,希望通过组件库的形式,统一项目中组件的逻辑和样式,让代码的复用性更强。 这篇文章主要是梳理组件库的整个结构和构建过程。 结构 首先在这里介绍一下组件库的代码结构,上面是整体代码目录结构,每个目录的作用如下: packages:组件源码位置,每个组件作为一个子目录;同时提供pa...

webpack模块化原理-Code Splitting

2017-10-01
阅读 9 分钟
16.2k
webpack的模块化不仅支持commonjs和es module,还能通过code splitting实现模块的动态加载。根据wepack官方文档,实现动态加载的方式有两种:import和require.ensure。

webpack模块化原理-ES module

2017-08-31
阅读 6 分钟
40.5k
我们依然写两个文件,m.js文件用es模块的方式export一个default函数和一个foo函数,index.js import该模块,具体代码如下:

webpack模块化原理-commonjs

2017-07-26
阅读 5 分钟
32.2k
我们都知道,webpack作为一个构建工具,解决了前端代码缺少模块化能力的问题。我们写的代码,经过webpack构建和包装之后,能够在浏览器以模块化的方式运行。这些能力,都是因为webpack对我们的代码进行了一层包装,本文就以webpack生成的代码入手,分析webpack是如何实现模块化的。