webpack

  • 问题

    用了webpack有一段时间了,其实对webpack打包出来的bundle.js里面到底是什么,怎么实现的不了解,只是知道里面有一坨东西。恰好有同事研究到了这个,觉得非常有意思,所以自己也来研究一下。

    一个入口,一个文件

    // webpack.config.js
    module.exports = {
      entry:'./index.js',
      output:{
        filename:'bundle.js'
      }
    };
    
    // index.js
    console.log('index');
    
    // bundle.js
    /******/ (function(modules) { //
  • 前言

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

    目标

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

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

    bun


  • 问题

    最近在做一个项目,用的是react+redux+webpack,但是发现写着写着build出来的bundle.js(压缩前)居然已经有2.3M左右!开玩笑!我自己写的src目录底下的文件总大小也不过100多K,这也太夸张了吧。。。于是开始寻找优化的方法。

    分析

    先分析一下历史原因。
    第一,在用webpack之前,做的项目都是jquery+后端渲染,一个页面请求巨多的js和css,导致性能问题。后来引入了react开发单页面应用的同时,使用webpack进行打包。所以,其实我们是很少经历说用webpack去打包jquery+后端渲染这样的项目的。
    第二,由于开发的是单页面应用,不存在设置多

  • 前言

    继上一篇 #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