webpack打包测试_webpack打包后的文件简单分析

webpack

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

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 对象，看名字就知道这是一个缓存对象，下面又是一个匿名的自执行函数

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

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

展开 webpack_require 函数:

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

展开 webpack_modules :

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

END