mini-webpack-build v1.0.0

module.hot.accept()是webpack中的一个API，用于在开发模式下实现热更新。 热更新可以让代码更改后自动重新加载到浏览器中，而无需手动刷新页面。 module.hot.accept()允许开发者在代码发生变化时触发回调函数，通过回调函数来更新页面上的内容。

"@babel/core" 是 Babel 的核心模块，它负责创建转换器（Transformer）以及协调其他 Babel 模块。 "@babel/parser" 是 Babel 的解析器，它将代码字符串解析为抽象语法树（AST）表示。 "@babel/preset-env" 是一个智能预设集合，可以根据目标环境自动确定所需的插件和 polyfill。 "@babel/traverse" 是一个 AST 遍历工具，可以帮助开发人员在节点级别对代码进行修改和转换。 这些工具可以一起使用来实现自定义的 JavaScript 编译器，以便将我们的源代码转换为浏览器、Node.js 或其他 JavaScript 运行时所能理解的版本，同时可以兼容各种环境以及旧版浏览器中的 ES6+ 特性。

cnpm install @babel/core @babel/parser @babel/preset-env @babel/traverse ./src/add.js export default (a, b) => a + b ./src/index.js import add from "./add.js"; console.log(add(1 , 2)) ./index.js 如下图所示 node index.js 于是就会在根目录下生成dist文件，并且生成bundle.js文件，执行它就会生成对应对应的结果 分析文件相互依赖如何实现打包的 把js文件按照键值对的形式，键为路径值，值为文件内容 需要导入到html文件，所以最开始是需要require函数，导入入口文件的 入口文件有个局部变量_export，防止文件间相互污染 根据文件路径，选择eval去执行对应的code字符串代码 如果在code内部含有require函数，则递归调用就行 !(function (obj) { function require(path) { var _export = {} !(function (_export, code) { eval(code) })(_export, objpath) // 先执行eval(code)，他的内部再次访问require，

        return _export
    }
    // 入口
    require('./index.js')
})({
    './add.js': '_export.default = function (a, b) {return a + b}',
    './index.js': `
        var add = require('./add.js').default
        console.log(add(1 , 2)) 
    `,
})