关于前端:webpack打包后的文件简单分析

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

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

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

新建两个 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

关于前端:webpack打包后的文件简单分析

webpack

新建打包

1. 新建测试模块

打包后的文件剖析

源码