Webpack4打包机制原理解析|原理篇

文章学习导航

面试总览

30 秒速记

核心判断：构建工具从入口解析依赖图，经转换和优化生成可在目标运行时加载的模块与资源
原理主线：围绕「核心机制」、「执行链路」、「边界与实践」建立输入、状态变化与输出之间的因果关系
文章范围：系统解析了Webpack4的打包机制，包括依赖分析、模块打包流程、Loader与Plugin的作用、AST解析与代码转换等核心原理，帮助开发者深入理解Webpack4如何实现高效的前端资源打包与优化。
边界与代价：静态分析受模块语法、动态依赖和副作用声明限制；拆包过细也会增加请求和运行时成本
工程落地：优化前先测构建阶段、产物组成和缓存命中，再针对解析、转换、压缩或运行时逐层处理

Webpack 从入口递归解析模块依赖，经 Loader 转换后形成依赖图，再组装为可由运行时加载的 Chunk 和资源文件。 简单来说，单文件先被解析和转换，随后沿着 import 关系不断发现新模块，直到入口关联的依赖全部处理完。生成阶段会把模块代码、依赖映射以及类似 require 的加载逻辑放进产物，插件则通过构建钩子介入并改变结果。单入口示例能说明基本模型，但真实工程还要考虑分包、优化和多种资源类型。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南和项目锁定版本为准。

webpack是一个打包模块化 JavaScript 的工具，在 webpack里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。

# 简单版打包模型步骤

我们先从简单的入手看，当 webpack 的配置只有一个出口时，不考虑分包的情况，其实我们只得到了一个bundle.js的文件，这个文件里包含了我们所有用到的js模块，可以直接被加载执行。那么，我可以分析一下它的打包思路，大概有以下4步：

利用babel完成代码转换及解析,并生成单个文件的依赖模块Map
从入口开始递归分析，并生成整个项目的依赖图谱
将各个引用模块打包为一个立即执行函数
将最终的bundle文件写入bundle.js中

# 单个文件的依赖模块Map

我们会可以使用这几个包：
- @babel/parser：负责将代码解析为抽象语法树
- @babel/traverse：遍历抽象语法树的工具，我们可以在语法树中解析特定的节点，然后做一些操作，如ImportDeclaration获取通过import引入的模块,FunctionDeclaration获取函数
- @babel/core：代码转换，如ES6的代码转为ES5的模式

由这几个模块的作用，其实已经可以推断出应该怎样获取单个文件的依赖模块了，转为Ast->遍历Ast->调用ImportDeclaration。代码如下

// exportDependencies.js
const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

 const exportDependencies = (filename)=>{
    const content = fs.readFileSync(filename,'utf-8')
    // 转为Ast
    const ast = parser.parse(content, {
        sourceType : 'module'//babel官方规定必须加这个参数，不然无法识别ES Module
    })

    const dependencies = {}
    //遍历AST抽象语法树
    traverse(ast, {
        //调用ImportDeclaration获取通过import引入的模块
        ImportDeclaration({node}){
            const dirname = path.dirname(filename)
            const newFile = './' + path.join(dirname, node.source.value)
            //保存所依赖的模块
            dependencies[node.source.value] = newFile
        }
    })
    //通过@babel/core和@babel/preset-env进行代码的转换
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    })
    return{
        filename,//该文件名
        dependencies,//该文件所依赖的模块集合(键值对存储)
        code//转换后的代码
    }
}
module.exports = exportDependencies

@前端进阶之旅: 代码已经复制到剪贴板

可以跑一个例子:

//info.js
const a = 1
export a
// index.js
import info from'./info.js'
console.log(info)

//testExport.js
const exportDependencies = require('./exportDependencies')
console.log(exportDependencies('./src/index.js'))

@前端进阶之旅: 代码已经复制到剪贴板

单个文件的依赖模块Map

有了获取单个文件依赖的基础，我们就可以在这基础上，进一步得出整个项目的模块依赖图谱了。首先，从入口开始计算，得到entryMap，然后遍历entryMap.dependencies,取出其value(即依赖的模块的路径)，然后再获取这个依赖模块的依赖图谱，以此类推递归下去即可，代码如下：

const exportDependencies = require('./exportDependencies')

//entry为入口文件路径
const exportGraph = (entry)=>{
    const entryModule = exportDependencies(entry)
    const graphArray = [entryModule]
    for(let i = 0; i < graphArray.length; i++){
        const item = graphArray[i];
        //拿到文件所依赖的模块集合,dependencies的值参考exportDependencies
        const { dependencies } = item;
        for(let j in dependencies){
            graphArray.push(
                exportDependencies(dependencies[j])
            )//关键代码，目的是将入口模块及其所有相关的模块放入数组
        }
    }
    //接下来生成图谱
    const graph = {}
    graphArray.forEach(item => {
        graph[item.filename] = {
            dependencies: item.dependencies,
            code: item.code
        }
    })
    //可以看出，graph其实是 文件路径名：文件内容 的集合
    return graph
}
module.exports = exportGraph

@前端进阶之旅: 代码已经复制到剪贴板

# 输出立即执行函数

首先，我们的代码被加载到页面中的时候，是需要立即执行的。所以输出的bundle.js实质上要是一个立即执行函数。我们主要注意以下几点：

我们写模块的时候，用的是 import/export.经转换后,变成了require/exports
我们要让require/exports能正常运行，那么我们得定义这两个东西，并加到bundle.js里
在依赖图谱里，代码都成了字符串。要执行，可以使用eval

因此，我们要做这些工作：

定义一个require函数，require函数的本质是执行一个模块的代码，然后将相应变量挂载到exports对象上
获取整个项目的依赖图谱，从入口开始，调用require方法。完整代码如下：

const exportGraph = require('./exportGraph')
// 写入文件，可以用fs.writeFileSync等方法，写入到output.path中
const exportBundle = require('./exportBundle')

const exportCode = (entry)=>{
    //要先把对象转换为字符串，不然在下面的模板字符串中会默认调取对象的toString方法，参数变成[Object object]
    const graph = JSON.stringify(exportGraph(entry))
    exportBundle(`
        (function(graph) {
            //require函数的本质是执行一个模块的代码，然后将相应变量挂载到exports对象上
            function require(module) {
                //localRequire的本质是拿到依赖包的exports变量
                function localRequire(relativePath) {
                    return require(graph[module].dependencies[relativePath]);
                }
                var exports = {};
                (function(require, exports, code) {
                    eval(code);
                })(localRequire, exports, graph[module].code);
                return exports;
                //函数返回指向局部变量，形成闭包，exports变量在函数执行后不会被摧毁
            }
            require('${entry}')
        })(${graph})`)
}
module.exports = exportCode

@前端进阶之旅: 代码已经复制到剪贴板

至此，简单打包完成。贴一下我跑的demo的结果。bundle.js的文件内容为：

Webpack4打包机制原理解析|原理篇

文章学习导航

面试总览

30 秒速记

核心判断：构建工具从入口解析依赖图，经转换和优化生成可在目标运行时加载的模块与资源
原理主线：围绕「核心机制」、「执行链路」、「边界与实践」建立输入、状态变化与输出之间的因果关系
文章范围：系统解析了Webpack4的打包机制，包括依赖分析、模块打包流程、Loader与Plugin的作用、AST解析与代码转换等核心原理，帮助开发者深入理解Webpack4如何实现高效的前端资源打包与优化。
边界与代价：静态分析受模块语法、动态依赖和副作用声明限制；拆包过细也会增加请求和运行时成本
工程落地：优化前先测构建阶段、产物组成和缓存命中，再针对解析、转换、压缩或运行时逐层处理

webpack是一个打包模块化 JavaScript 的工具，在 webpack里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。

# 简单版打包模型步骤

我们先从简单的入手看，当 webpack 的配置只有一个出口时，不考虑分包的情况，其实我们只得到了一个bundle.js的文件，这个文件里包含了我们所有用到的js模块，可以直接被加载执行。那么，我可以分析一下它的打包思路，大概有以下4步：

利用babel完成代码转换及解析,并生成单个文件的依赖模块Map
从入口开始递归分析，并生成整个项目的依赖图谱
将各个引用模块打包为一个立即执行函数
将最终的bundle文件写入bundle.js中

# 单个文件的依赖模块Map

我们会可以使用这几个包：
- @babel/parser：负责将代码解析为抽象语法树
- @babel/traverse：遍历抽象语法树的工具，我们可以在语法树中解析特定的节点，然后做一些操作，如ImportDeclaration获取通过import引入的模块,FunctionDeclaration获取函数
- @babel/core：代码转换，如ES6的代码转为ES5的模式

由这几个模块的作用，其实已经可以推断出应该怎样获取单个文件的依赖模块了，转为Ast->遍历Ast->调用ImportDeclaration。代码如下

// exportDependencies.js
const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

 const exportDependencies = (filename)=>{
    const content = fs.readFileSync(filename,'utf-8')
    // 转为Ast
    const ast = parser.parse(content, {
        sourceType : 'module'//babel官方规定必须加这个参数，不然无法识别ES Module
    })

    const dependencies = {}
    //遍历AST抽象语法树
    traverse(ast, {
        //调用ImportDeclaration获取通过import引入的模块
        ImportDeclaration({node}){
            const dirname = path.dirname(filename)
            const newFile = './' + path.join(dirname, node.source.value)
            //保存所依赖的模块
            dependencies[node.source.value] = newFile
        }
    })
    //通过@babel/core和@babel/preset-env进行代码的转换
    const {code} = babel.transformFromAst(ast, null, {
        presets: ["@babel/preset-env"]
    })
    return{
        filename,//该文件名
        dependencies,//该文件所依赖的模块集合(键值对存储)
        code//转换后的代码
    }
}
module.exports = exportDependencies

@前端进阶之旅: 代码已经复制到剪贴板

可以跑一个例子:

//info.js
const a = 1
export a
// index.js
import info from'./info.js'
console.log(info)

//testExport.js
const exportDependencies = require('./exportDependencies')
console.log(exportDependencies('./src/index.js'))

@前端进阶之旅: 代码已经复制到剪贴板

单个文件的依赖模块Map

有了获取单个文件依赖的基础，我们就可以在这基础上，进一步得出整个项目的模块依赖图谱了。首先，从入口开始计算，得到entryMap，然后遍历entryMap.dependencies,取出其value(即依赖的模块的路径)，然后再获取这个依赖模块的依赖图谱，以此类推递归下去即可，代码如下：

const exportDependencies = require('./exportDependencies')

//entry为入口文件路径
const exportGraph = (entry)=>{
    const entryModule = exportDependencies(entry)
    const graphArray = [entryModule]
    for(let i = 0; i < graphArray.length; i++){
        const item = graphArray[i];
        //拿到文件所依赖的模块集合,dependencies的值参考exportDependencies
        const { dependencies } = item;
        for(let j in dependencies){
            graphArray.push(
                exportDependencies(dependencies[j])
            )//关键代码，目的是将入口模块及其所有相关的模块放入数组
        }
    }
    //接下来生成图谱
    const graph = {}
    graphArray.forEach(item => {
        graph[item.filename] = {
            dependencies: item.dependencies,
            code: item.code
        }
    })
    //可以看出，graph其实是 文件路径名：文件内容 的集合
    return graph
}
module.exports = exportGraph

@前端进阶之旅: 代码已经复制到剪贴板

# 输出立即执行函数

首先，我们的代码被加载到页面中的时候，是需要立即执行的。所以输出的bundle.js实质上要是一个立即执行函数。我们主要注意以下几点：

我们写模块的时候，用的是 import/export.经转换后,变成了require/exports
我们要让require/exports能正常运行，那么我们得定义这两个东西，并加到bundle.js里
在依赖图谱里，代码都成了字符串。要执行，可以使用eval

因此，我们要做这些工作：

定义一个require函数，require函数的本质是执行一个模块的代码，然后将相应变量挂载到exports对象上
获取整个项目的依赖图谱，从入口开始，调用require方法。完整代码如下：

const exportGraph = require('./exportGraph')
// 写入文件，可以用fs.writeFileSync等方法，写入到output.path中
const exportBundle = require('./exportBundle')

const exportCode = (entry)=>{
    //要先把对象转换为字符串，不然在下面的模板字符串中会默认调取对象的toString方法，参数变成[Object object]
    const graph = JSON.stringify(exportGraph(entry))
    exportBundle(`
        (function(graph) {
            //require函数的本质是执行一个模块的代码，然后将相应变量挂载到exports对象上
            function require(module) {
                //localRequire的本质是拿到依赖包的exports变量
                function localRequire(relativePath) {
                    return require(graph[module].dependencies[relativePath]);
                }
                var exports = {};
                (function(require, exports, code) {
                    eval(code);
                })(localRequire, exports, graph[module].code);
                return exports;
                //函数返回指向局部变量，形成闭包，exports变量在函数执行后不会被摧毁
            }
            require('${entry}')
        })(${graph})`)
}
module.exports = exportCode

@前端进阶之旅: 代码已经复制到剪贴板

至此，简单打包完成。贴一下我跑的demo的结果。bundle.js的文件内容为：