webpack打包后的文件简单分析

webpack

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

webpack打包后的文件简单分析_第1张图片

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

webpack打包后的文件简单分析_第2张图片

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

打包后的文件分析

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

webpack打包后的文件简单分析_第3张图片

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

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

webpack打包后的文件简单分析_第4张图片

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

  1. 展开 webpack_require 函数:

webpack打包后的文件简单分析_第5张图片

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

  1. 展开 webpack_modules :

webpack打包后的文件简单分析_第6张图片

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


源码

END

你可能感兴趣的:(前端,javascript,webpack)