1.webpack底层原理 (实现一个webpack)
步骤：1.拿到入口文件的代码并读出来转化为js对象(抽象语法术parser)
2.拿到所有模块的依赖 ‘./message.js’,放进数组中 引入第三方模块和babel相关
3.对代码进行转换使浏览器能够执行从es6/es module语法转化
1.创建打包函数Complier
2.传入入口文件,引入fs模块,使用fs.readFileSync读取入口文件,格式为utf-8
3.使用parser.parse分析出抽象语法术
4.使用traverse进行模块分析获取内容,获取依赖路径,把require替换成__webpack_require__;准备一个依赖数组,将获取的路径存储进去
5.递归遍历依赖数组,将每个路径文件都解析
6.打包文件,输出打包路径和结果
这是结合https://blog.csdn.net/qq_40036736/article/details/93979791这篇文章,和自己实现webpack打包步骤写的
2.webpack打包原理 (打包项目)
1.webpack是什么
webpack 是一个模块打包机，将根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源
当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
*代码拆分: webpack 有两种组织模块的依赖方式，同步、异步; 异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包
*智能解析:将预编译语言 转换成 浏览器识别的语言;webpack 有一个智能解析器，几乎可以处理任何第三方库;
*性能优化
3.webpack核心部分
- 入口(entry): 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
- 输出(output): 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是
./dist/main.js，其他生成文件默认放置在./dist文件夹中。 - loader: webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中
- 插件(plugin): loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
- 模式(mode): 通过选择
development,production或none之中的一个，来设置mode参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为production。 - 浏览器兼容性(browser compatibility): webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的
import()和require.ensure()需要Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。