webpack 复习（一）webpack编译结果分析

写在前面

工作刚满一年，也停更了一年多。时间总是不等人的，一年的时间收获颇多，感想也颇多。怎么说呢，人大概就是这样吧，总是在当下幻想未来、怀念过去。走走停停，最后发现，现在就是最好的时刻。写写最近的感受吧，先提前提醒一下欧，有些感概（但是也不是特别伤感，是反省~~~~）。

自己确实不是很自律，现在回头看，很后悔当初没有在合适的时间做合适的事情，虚度了不少光影。没办法啊，因为人总是懒惰的，惰性感很强啊。但是，不是还有句话叫：开始就不算晚，一切都还来得及。是的，一切都还来得及。

2020 年疫情开始，现在已经 2022 年，时间过的很快，也很慢。最近几天，因为疫情的原因，一直在居家，所以想了很多有的没的，仔细回顾了过去的三年时间，发现自己的心态变了很多。性格依然没变，最大的变化是控制情绪的能力变差了，需要慢慢调整心态，静静心。

另外，今天有关 mu5735 航班的消息太突然，又一次提醒我们：明天和意外哪一个先来是未知的。真的真的真的，需要把握好眼前的时间，不需要太努力，不需要有多大的目标，简单的顺其自然，最后自然会水到渠成。

2022 年，我想，该拾起封藏很久的那颗初心，重新出发了！

不需要时时刻刻提醒，只需要偶尔停下来，跟自己对话，同自己相处，让自己调整到最舒服方式的状态，然后继续出发。

过渡

上面随便写了一下，最近的感受。也许是太久没有做自我总结了，总会有一些前言不着后调的。我随便写写，大家就随便看看。但是不能不看哇，毕竟还得看技术内容啊。

很多东西，都记在脑子里，加上平时用的少就太容易忘记了。最近，在做知识总结进行复习，能记录一点是一点吧。

最近在复习 webpack，所以就写有关 webpack 的基础知识吧。

webpack

关于 webpack，很多童鞋应该不陌生。它是前端工程化的一个构建工具，给开发者带来了极大的便利。因为 webpack 的出现，让开发者只需要关注具体的业务功能。比如，webpack 把浏览器的兼容性、ES6 7 8 语法的兼容性等非业务功能部分都已经完成。通俗点说就是，开发者在进行开发时，不需要考虑各种代码的兼容性问题，怎么好用、怎么方便怎么来。

首先，看个图：

图中有三个部分：

• 左侧：源码部分。可理解成，项目的各个模块、图片、页面等资源。项目最终不会运行这部分代码。
• 中间：就是今天的主角 —— webpack。它可以打包编译源码部分。webpack 编译运行的环境是 Node 环境。因为 webpack 不仅在浏览器端可用，在服务端也可用。
• 右侧：webpack 对源码的打包结果。项目最终运行的代码。

webpack 配置文件

webpack 有自己的配置文件：webpack.config.js。用于配置 webpack 编译打包生成的结果。

该配置文件是会在 webpack 编译打包过程中运行，意味着：该文件中的语法要使用 commonJS。

• webpack.config.js配置文件：默认导出一个配置对象

module.exports = {
  mode: "development",
  entry: "./src/index.js", // 打包时的入口文件
  output: {
    filename: "main.js", // 打包结果的输出文件名：dist 目录下的文件
  },
  devtool: '', // 使用源码地图 source map，目的是便于调试 精准定位代码报错的源代码模块位置
}

webpack 编译结果浅析

首先需要明确的是：

1. webpack 解决了全局变量污染问题：支持模块化（commonJS 和 ES6 模块化）；
2. webpack 支持 commonJS 和 ES6 模块化两种模块化格式的使用，这里只分析了 commonJS 的使用方式；
3. webpack 中的模块具有缓存机制，即多次同时导入同一个模块，该模块只会执行一次。

编译结果分析

1. commonJS 的模块化使用包含两部分：require(module_url)导入模块，module.exports导出模块；

2. require(module_url)导入模块对于路径的模块，一个模块对应一个文件。模块路径是唯一的，作为模块的 ID。

   • 模块导入时，先会判断导入的模块是否已经缓存过，如果存在缓存则之间返回缓存结果；
   • 否则，会先把模块内的代码先执行一遍，然后缓存已导入的模块；

3. 关于 module.exports和 exports，本质上导出的内容就是 module.exports，exports是的 module.exports引用结果。

总的来说，其实就是实现 require 方法、模块缓存。同时，模块内的代码不会污染全局代码，即可使用立即执行函数实现。

简单还原 webpack 的编译结果：

/**
 * webpack 的编译原理
 * 采用立即执行函数：避免全局变量的污染
 */
(function (module) {
  // 模块缓存机制
  var module_cache = {};
  // 导入函数
  function require(moduleId) {
    // 模块存在缓存，则直接返回缓存结果
    if (module_cache[moduleId]) {
      return module_cache[moduleId];
    }
    // 当前模块无缓存，运行当前模块
    module_cache[moduleId] = {};
    // require 导出的数据格式
    var module_webpack = {
      exports: {},
    };
    // 执行当前模块模块
    module[moduleId](module_webpack, module_webpack.exports, require);
    module_cache[moduleId] = module[moduleId]; // 缓存模块
    return module_webpack.exports; // 返回导出结果
  }

  // 运行入口模块
  require('./src/index.js');
})({
  "./src/a.js": function (module, exprots, require) {
    const b = require('./src/b.js');
    console.log('module a');
    console.log('require b: ', b);
  },
  "./src/b.js": function (module, exprots, require) {
    module.exports = 'module b'
    console.log('module b');
  },
  "./src/index.js": function (module, exprots, require) {
    require('./src/a.js')
    require('./src/a.js')
    require('./src/a.js')
    require('./src/a.js')
    require('./src/a.js')
    require('./src/a.js')
    console.log('main.js')
  }
})