如何通过mini webpack优化基础打包，有效处理包缓存及环依赖问题？

本文共计2220个文字，预计阅读时间需要9分钟。

目录正文index.js主入口文件读取主入口文件对依赖文件进行读取操作解决依赖成环问题正文带你实现webpack最基础的打包功能同时解决包缓存和依赖问题~ 车辆先来看示例

目录

• 正文
• index.js 主入口文件
• 读主入口文件
• 对依赖文件进行读取操作
• 解决依赖成环问题

正文

本文带你实现 webpack 最基础的打包功能，同时解决包缓存和环依赖的问题 ~

发车，先来看示例代码。

index.js 主入口文件

我们这里三个文件，index.js 是主入口文件：

// filename: index.js import foo from './foo.js' foo(); //filename: foo.js import message from './message.js' function foo() { console.log(message); } // filename: message.js const message = 'hello world' export default message;

接下来，我们会创建一个 bundle.js 打包这三个文件，打包得到的结果是一个 JS 文件，运行这个 JS 文件输出的结果会是 'hello world'。