webpack打包后的文件简单分析

webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

image

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

本文主要是分析webpack打包后的文件

---

新建打包

1. 新建测试模块

新建两个 js , 导出简单的函数

# add.js
const add = (a, b) => a + b; 

# sub.js
const sub = (a, b) => a - b; 

新建主入口方法 index.js,分别引入对应模块方法

# index.js
const { add } = require('./add');
const { sub } = require('./sub');

console.log(add(99, 1));
console.log(sub(99, 1));

新建webpack配置

# webpack.config.js
module.exports = {
  mode: 'development',
  // mode: 'production',
  devtool: 'source-map',
  entry: resolve('./index.js'),
  output: {
    path: resolve('./dist'),
  }
};

执行打包, npm run build

执行打包后的js，运行正常

---

打包后的文件分析

瞄一眼打包后的文件: main.js

从上到下扫一遍后，可以发现其是一个匿名的自执行函数，函数内部定义了一个 webpack_modules 对象，一个闭包：webpack_require 函数，一个 webpack_module_cache 对象，看名字就知道这是一个缓存对象，下面又是一个匿名的自执行函数

1. 展开下面的匿名自执行函数:

其实就是入口 index.js 里的代码块，对导出模块部分做了相应的处理，其内部调用 webpack_require 函数实现了模块的导入功能

2. 展开 webpack_require 函数:
   

内部也比较简单，使用了 webpack_module_cache 缓存模块，第一次导入模块时 在 webpack_modules 根据模块id(如 './add.js"')导入相应的模块并写入缓存

3. 展开 webpack_modules :

其实就是集成了所有模块的一个集合，至此整个模块流程分析完了

---

源码

---

END