webpack输出文件分析以及编写一个loader

作者: 杜文斌 | 来源:发表于2019-08-11 16:53 被阅读0次

webpack构建流程

webpack是时下最流行的前端打包构建工具，本质上是一个模块打包器，通过从入口文件开始递归的分析寻找模块之间的依赖，最终输出一个或多个bundle文件。

webpack的构建是一个串行的流程，从启动到结束，会依次执行以下流程：

初始化配置

从配置文件和命令行中读取参数并合并参数，生成最终的配置项，并且执行配置文件中的插件实例化语句，生成Compiler传入plugin的apply方法，为webpack事件流挂上自定义钩子；
开始编译

生成compiler示例，执行compiler.run开始编译；
确定入口文件

从配置项中读取所有的入口文件；
编译模块

从入口文件开始编译，使用对应的loader编译模块，并且递归的编译当前模块所依赖的模块，在所有的模块都编译完成后，得到所有模块的最终内容和模块之间的依赖关系，最后将所有模块的 require 语句替换为 __webpack_require__ 来模拟模块化操作；
资源输出

根据入口和模块的依赖关系，组装成一个个包含多个模块的chunk，然后将chunk转换成一个单独的文件加入输出列表。
生成文件

将生成的内容根据配置生成文件，输出到指定的位置。

webpack的核心对象是Compile，负责文件的监听和启动编译，继承自Tapable[https://github.com/webpack/tapable]，使得Compile实例具备了注册和调用插件的功能。

在webpack执行构建流程时，webpack会在特定的时机广播对应的事件，插件在监听到事件后，会执行特定的逻辑来修改模块的内容。

通过下面这个流程图我们能够对webpack的构建流程有个更直观的印象：

process.png

<center>webpack运行流程图</center >

webpack输出文件分析

下面，我们将通过分析webpack输出的bundle文件，了解bundle文件是如何在浏览器中运行的。

单文件分析

首先创建 src/index.js ，执行一个最简单的js语句：

console.log('hello world')

创建 webpack.config.js，配置如下：

const path = require('path')

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist')
  }
}

本例中使用的webpack版本为4.35.3，此处为了更好的分析输出的bundle文件，将mode设置为'none'，此时webpack不会默认启用任何插件。

mode有三个可选值，分别是'none'、'production'、'development'，默认值为'production'，默认开启以下插件：

FlagDependencyUsagePlugin：编译时标记依赖；
FlagIncludedChunksPlugin：标记子chunks，防止多次加载依赖；
ModuleConcatenationPlugin：作用域提升(scope hosting)，预编译功能，提升或者预编译所有模块到一个闭包中，提升代码在浏览器中的执行速度；
NoEmitOnErrorsPlugin：在输出阶段时，遇到编译错误跳过；
OccurrenceOrderPlugin：给经常使用的ids更短的值；
SideEffectsFlagPlugin：识别 package.json 或者 module.rules 的 sideEffects 标志（纯的 ES2015 模块)，安全地删除未用到的 export 导出；
TerserPlugin：压缩代码

mode值为'development'时，默认开启以下插件：

NamedChunksPlugin：以名称固化chunkId；
NamedModulesPlugin：以名称固化moduleId

执行webpack构建命令：

$ webpack

输出到dist文件夹中的 main.js 文件内容如下：

(function(modules) { // webpackBootstrap
// 模块缓存
var installedModules = {};

// 模块加载函数
function __webpack_require__(moduleId) {

  // 如果加载过该模块，则直接从缓存中读取
  if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
  }
  // 创建新模块并将其缓存起来
  var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
  };

  // 执行模块函数，设置module.exports
  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

  // 将module标记为已加载
  module.l = true;

  // 返回设置好的module.exports
  return module.exports;
}


// 指向modules
__webpack_require__.m = modules;

// 指向缓存
__webpack_require__.c = installedModules;

// 定义exports的get方式
__webpack_require__.d = function(exports, name, getter) {
  if(!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
  }
};

// 设置es6模块标记
__webpack_require__.r = function(exports) {
  if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  }
  Object.defineProperty(exports, '__esModule', { value: true });
};

// create a fake namespace object
// mode & 1: value is a module id, require it
// mode & 2: merge all properties of value into the ns
// mode & 4: return value when already ns object
// mode & 8|1: behave like require
__webpack_require__.t = function(value, mode) {
  if(mode & 1) value = __webpack_require__(value);
  if(mode & 8) return value;
  if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  var ns = Object.create(null);
  __webpack_require__.r(ns);
  Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  return ns;
};

// 兼容commonjs和es6模块
__webpack_require__.n = function(module) {
  var getter = module && module.__esModule ?
      function getDefault() { return module['default']; } :
      function getModuleExports() { return module; };
  __webpack_require__.d(getter, 'a', getter);
  return getter;
};

// Object.prototype.hasOwnProperty的封装
__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

// webpack配置的publicpath
__webpack_require__.p = "";


// 加载模块并返回
return __webpack_require__(__webpack_require__.s = 0);
})
/************************************************************************/
([
/* 0 */
/***/ (function(module, exports) {

console.log('hello world')

/***/ })
]);

可以看到输出的代码是个IIFE（立即执行函数），可以简化如下：

(function(modules) {
  var installedModules = {};

  // webpack require语句
  // 加载模块
  function __webpack_require__(moduleId) {}

  return __webpack_require__(0)
})([
  function(module, exports) {
    console.log('hello world')
  }
])

简化后代码中的 __webpack_require__ 函数起到的就是加载模块的功能，IIFE函数接收的参数是个数组，第0项内容便是 src/index.js 中的代码语句，通过 __webpack_require__ 函数加载并执行模块，最终在浏览器控制台输出 hello world。

接下来我们通过代码分析下 __webpack_reuqire__ 函数内部是如何工作的

function __weboack_require__(moduleId) {
  // 如果已经加载过该模块，则从缓存中直接读取
  if (installedModules[moduleId]) {
    return installedModules[moduleId].exports;
  }

  // 如果没有加载过该模块，则创建一个新的module存入缓存中
  var module = installedModules[moduleId] = {
    i: moduleId, // module id
    l: false, // 是否已加载 false
    exports: {} // 模块导出
  };

  // 执行该module
  // call方法第一个参数为modules.exports，是为了module内部的this指向该模块
  // 然后传入三个参数，分别为module, module.exports, __webpack_require__模块加载函数
  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

  // 设置module为已加载
  module.l = true;

  // 最终返回module.exports
  return module.exports;
  }
}

可以看到 __webpack_require__ 函数接收一个模块id，通过执行该模块，最终返回该模块的exports，并将模块缓存在内存中。如果再次加载该模块，则直接从缓存中读取。 modules[modulesId] 的内容是IIFE参数的第0项，即：

function(module, exports) {
  console.log('hello world')
}

在导出的IIFE中，除了 __webpack_require__ 函数，还在 __webpack_require__ 下挂载了很多属性.

__webpack_require__.m : 挂载所有的modules；
__webpack_require__.c : 挂载已缓存的modules；
__webpack_require__.d : 定义exports的getter；
__webpack_require__.r : 将module设置为es6模块；
__webpack_require__.t : 根据不同的场景返回对应处理后的模块或值；
__webpack_require__.n : 返回getter，内部区分是否为es6模块；
__webpack_require__.o : Object.prototype.hasOwnProperty功能封装；
__webpack_require__.p : output配置项中的publicPath属性；

多文件引用分析

在前面的例子中，webpack打包的bundle中只包含一个非常简单的入口文件，并不存在模块之间的引用。

下面我们修改下 src/index.js 中的代码，引用一个ES6模块 src/math.js 进来：

// math.js
const add = function (a, b) {
  return a + b
}

export default add

// index.js
import add from './math'

console.log(add(1, 2))

重新执行webpack打包命令，可以看到输出的IIFE中的参数已经变成了两项：

([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);


console.log(Object(_math__WEBPACK_IMPORTED_MODULE_0__["default"])(1, 2))


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
const add = function (a, b) {
  return a + b
}

/* harmony default export */ __webpack_exports__["default"] = (add);


/***/ })
 ]);

数组第1项中定义了 math.js 模块，并且通过执行 __webpack_require__.r(__webpack_exports__) 使得webpack能够识别出该模块是个ES6模块，最后将 __webpack_exports__ 的 default 属性值设置为函数 add 。

数组第0项是 index.js 打包后输出的模块，语句 var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1) 的功能即是将模块 math.js 导出的 add 函数引进来， __webpack_require__(1) 返回 module.exports，其中 1 是由webpack在打包时生成的chunkId，最后通过 console.log(Object(_math__WEBPACK_IMPORTED_MODULE_0__["default"])(1, 2)) 执行 index.js 中的语句。

webpack通过将原本独立的一个个模块存放到IIFE的参数中来加载，从而达到只进行一次网络请求便可执行所有模块，避免了通过多次网络加载各个模块造成的加载时间过长的问题。并且在IIFE函数内部，webpack也对模块的加载做了进一步优化，通过将已经加载过的模块缓存起来存在内存中，第二次加载相同模块时便直接从内存中取出。

异步加载分析

上面两个例子都是同步加载模块并执行，但是在实际项目中为了提高页面的加载速度，往往对首屏初始化时暂时用不到的模块进行异步加载，比如从首页跳转后的路由模块等。接下来我们将通过异步加载的方式来加载 math.js 模块并执行其导出的 add 函数。

import('./math').then((add) => {
  console.log(add(1, 2))
})

重新打包后，输出 main.js 和 1.js，1.js 是需要异步加载的文件。

先分析入口文件 main.js ，可以看到相对于同步加载方式的代码输出，文件中多了 __webpack_require__.e 和 webpackJsonpCallback 函数，IIFE中的参数也只有一个：

/***/ (function(module, exports, __webpack_require__) {


__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(null, 1)).then((add) => {
  console.log(add(1, 2))
})


/***/ })

该模块通过 __webpack_require__.e(1) 的方式加载模块1的文件，加载成功后再通过执行 __webpack_require__.bind(null, 1) 返回模块1，然后执行该模块导出的 add 函数。

__webpack_require__.e 的作用便是加载需要异步加载的模块，函数的内容如下：

__webpack_require__.e = function requireEnsure(chunkId) {
 var promises = [];

 var installedChunkData = installedChunks[chunkId];
 if (installedChunkData !== 0) { // 如果为0则代表已经加载过该模块

   // installedChunkData 不为空且不为0表示该 Chunk 正在网络加载中
   // 直接返回promise对象
   if (installedChunkData) {
     promises.push(installedChunkData[2]);
   } else {
     // 该chunk从未被加载过，返回数组包含三项，分别是resolve，reject和创建的promise对象
     var promise = new Promise(function (resolve, reject) {
       installedChunkData = installedChunks[chunkId] = [resolve, reject];
     });
     promises.push(installedChunkData[2] = promise);

     // 创建script标签，加载模块
     var script = document.createElement('script');
     var onScriptComplete;

     script.charset = 'utf-8';
     script.timeout = 120;
     if (__webpack_require__.nc) {
       script.setAttribute("nonce", __webpack_require__.nc);
     }

     // jsonpScriptSrc的作用是返回根据配置的publicPath和chunkId生成的文件路径
     script.src = jsonpScriptSrc(chunkId);

     // 创建一个Error实例，用于在加载错误时catch
     var error = new Error();
     onScriptComplete = function (event) {
       // 防止内存泄漏
       script.onerror = script.onload = null;
       clearTimeout(timeout);
       var chunk = installedChunks[chunkId];

       if (chunk !== 0) {
         if (chunk) {
           // chunk加载失败，抛出错误
           var errorType = event && (event.type === 'load' ? 'missing' : event.type);
           var realSrc = event && event.target && event.target.src;
           error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
           error.name = 'ChunkLoadError';
           error.type = errorType;
           error.request = realSrc;
           chunk[1](error);
         }
         installedChunks[chunkId] = undefined;
       }
     };

     // 异步加载最长等待时间120s
     var timeout = setTimeout(function () {
       onScriptComplete({ type: 'timeout', target: script });
     }, 120000);
     script.onerror = script.onload = onScriptComplete;

     // 将创建的script标签插入dom中
     document.head.appendChild(script);
   }
 }
 return Promise.all(promises);
};

函数内部先判断是否加载过该模块，如果没有加载过，则创建一个script标签，script的路径是通过内部的 jsonpScriptSrc 函数根据webpack的配置生成最终的src路径返回得到。函数最终返回一个 Promise 对象，js文件加载失败时则会执行 reject将错误抛出。

math.js 输出的bundle 1.js 的内容很简单，代码如下：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */,
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
const add = function (a, b) {
  return a + b
}

/* harmony default export */ __webpack_exports__["default"] = (add);


/***/ })
]]);

可以看到该bundle的作用就是向 window['webpackJsonp'] 数组中push了一个新的数组，其中第一项 [1] 是webpack生成的chunkId，第二项是 math.js 转换后的模块具体内容。

与此同时，在 main.js 中IIFE的后部分，对挂载在全局的 window['webpackJsonp'] 数组的push方法进行了重写，指向了在前面定义过的 webpackJsonpCallback 函数：

function webpackJsonpCallback(data) {
    var chunkIds = data[0];
    var moreModules = data[1];
    // 将data第1项模块添加到modules中,
    // 然后将对应的chunkId标记为已加载
    var moduleId, chunkId, i = 0, resolves = [];
    for(;i < chunkIds.length; i++) {
        chunkId = chunkIds[i];
        if(installedChunks[chunkId]) {
            resolves.push(installedChunks[chunkId][0]);
        }
        installedChunks[chunkId] = 0;
    }

    // 将传进来的moreModules数组中的每一个模块依次添加到IIFE中缓存的modules中
    for(moduleId in moreModules) {
        if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
            modules[moduleId] = moreModules[moduleId];
        }
    }

    // parentJsonpFunction为window['webpackJsonp']中原声的数组push方法
    // 执行parentJsonpFunction将data真正的添加到window['webpackJsonp']数组中去
    if(parentJsonpFunction) parentJsonpFunction(data);

    // 将前面创建的promise执行resolve
    while(resolves.length) {
        resolves.shift()();
    }
};

通过分析 webpackJsonpCallback 函数的内容，可以看到该函数的主要作用是将传入的chunkid标记为已加载，并将传入的模块挂在到缓存模块的 modules 对象上，最终执行 __webpack_require__.e 函数返回的promise对象的resolve方法代表该异步加载的模块已经加载完成，此时，在 __webpack_require__.e(1).then() 中便可以通过同步加载模块的方式加载该模块啦。

重新梳理一下入口主文件加载异步模块的大概流程：

执行 __webpack_require__.e 加载异步模块；
创建chunkid对应的script标签加载脚本，并返回promise；
如果加载失败，reject掉promise；如果加载成功，异步chunk立即执行 window[webpackJsonp] 的push方法，将模块标记为已加载，并resolve掉相应的promise；
成功后可在 __webpack_require__.e().then 中以同步的方式加载模块。

输出文件总结

在webpack输出的文件中，通过IIFE的形式将所有模块作为参数都传递进来，用 __webpack_require__ 模拟import或者require语句，然后从入口模块开始依次递归的执行加载模块，需要异步加载的模块，通过在dom上插入一个新的script标签加载。并且内部对模块加载做了缓存处理优化。

在实际的项目中，输出的bundle内容会远比本文中的demo复杂的多，并且会有chunkId设置，公共chunk抽取，代码压缩混淆等优化，但是可以通过这个最基本的demo，熟悉webpack输出的文件在运行时的工作流程，便于我们在调试时更好的分析。

编写一个简单的loader

在编写一个loader之前，先简单介绍下webpack loader的作用。在webpack中，可以将loader理解为一个转换器，通过处理文件的输入，返回一个新的结果，最终交给webpack进行下一步的处理。

一个loader就是一个nodejs模块，它的基本结构如下:

// 可以通过loader-utils这个包获取该loader的配置项options
const loaderUtils = require('loader-utils')

// 导出一个函数，source为webpack传递给loader的文件源内容
module.exports = function(source) {
  // 获取该loader的配置项
  const options = loaderUtils.getOptions(this)

  // 一些转换处理，最终返回处理后的结果。
  return source
}

在平时配置webpack loader的时候，都是使用通过npm安装的loader，为了加载本地的loader，一般有两种方式，第一种是通过npm link的方式将loader关联到项目的node_modules下，还有一种方式是通过配置wepack的resolveLoader.modules配置项，告诉webpack通过何种形式寻找loader。第一种方式需要配置相关的 package.json ，在本例中使用第二种方式配置。

module.exports = {
  resolveLoader: {
    // 假设本地编写的loader在loaders文件夹下
    modules: ['node_modules', './loaders/']
  }
}

下面我们编写一个loader，用于删除代码中的注释。命名为remove-comment-loader：


module.exports = function(source) {
  // 匹配js中的注释内容
  const reg = new RegExp(/(\/\/.*)|(\/\*[\s\S]*?\*\/)/g)

  // 删除注释
  return source.replace(reg, '')
}

然后修改webpack.config.js：

const path = require('path')

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'remove-comment-loader' // 当匹配到js文件时，使用我们编写的remove-comment-loader
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist')
  },
  resolveLoader: {
    modules: ['node_modules', './loaders/'] // 配置加载本地loader
  }
}

然后在入口文件代码中加上一些注释，重新打包查看输出文件，就能看到代码中的注释已经被删除了。

本文中的demo代码参见；https://github.com/duwenbin0316/webpack-runtime-demo

在此处顺便向大家推荐下民生科技公司Firefly移动金融开发平台中的前端打包构建工具apollo-build。apollo-build包含开发调试、打包、测试、
和打包dll的功能，并且提供了非常好用的前端接口Mock功能，命令行体验和create-react-app一致。我们封装了webpack中的大部分常用功能并在内部做了很多优化，从中提取出了最常用的配置项，即使不熟悉webpack的配置也能快速上手，并且也支持通过 webpack.config.js 的方式做高阶的修改，欢迎访问民生科技官网了解。

参考

<hr />

《深入浅出webpack》 - 吴浩麟

Webpack揭秘——走向高阶前端的必经之路

作者介绍

杜文斌

民生科技有限公司用户体验技术部Firefly移动金融开发平台前端开发工程师

webpack输出文件分析以及编写一个loader

webpack构建流程

webpack输出文件分析

单文件分析

多文件引用分析

异步加载分析

输出文件总结

编写一个简单的loader

参考

作者介绍

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读