webpack

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

Webpack 能够将多种动态资源 js、css、less 转换成一个动态文件，缩小了页面的申请。

本文次要是剖析webpack打包后的文件

新建打包

1. 新建测试模块

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

# add.jsconst add = (a, b) => a + b; # sub.jsconst sub = (a, b) => a - b;

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

# index.jsconst { add } = require('./add');const { sub } = require('./sub');console.log(add(99, 1));console.log(sub(99, 1));

新建webpack配置

# webpack.config.jsmodule.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 函数实现了模块的导入性能

  1. 开展 webpack_require 函数:

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

  1. 开展 webpack_modules :

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

源码

END