webpack 源码

  • 前言

    在上一篇 #98 中,我们通过实现requireJS,对模块化有了一些认识。今天我们更进一步,看看如何实现一个简单的webpack,实现的源码参考这里。

    目标

    现在的webpack是一个庞然大物,我们不可能实现其所有功能。
    那么,应该将目光聚焦在哪儿呢?
    webpack的第一个commit可以看出,其当初最主要的目的是在浏览器端复用符合CommonJS规范的代码模块。这个目标不是很难,我们努力一把还是可以实现的。

    注意:在此我们不考虑插件、loaders、多文件打包等等复杂的问题,仅仅考虑最基本的问题:如何将多个符合CommonJS规范的模块打包成一个JS文件,以供浏览器执行。

    bun


  • 前言

    继上一篇 #99 之后,我们今天来看看如何实现 webpack 的代码切割(code-splitting)功能,最后实现的代码版本请参考这里。至于什么是 code-splitting ,为什么要使用它,请直接参考官方文档。

    目标

    一般说来,code-splitting 有两种含义:

    1. 将第三方类库单独打包成 vendor.js ,以提高缓存命中率。(这一点我们不作考虑)
    2. 将项目本身的代码分成多个 js 文件,分别进行加载。(我们只研究这一点)

    换句话说,我们的目标是:将原先集中到一个 output.js 中的代码,切割成若干个 js 文件,然后分别进行加载。 也就是说:原先只加载 ou

  • 前言

    在上一篇 #100 中,我们实现了 webpack 的 code-splitting 功能。今天,我们来探索 loader 机制,最终实现的代码版本参考这里。(参考的 webpack 版本是这个)

    问题

    以加载 less 为例。

    // example.js
    require('./style.less');
    // style.less
    @color: #000fff;
    .content {
        width: 50px;
        height: 50px;
        background-color: @color;
    }

    按照官方文档,想要加载 less 文件,我们需要配置三个 loade