webpack原理类型问题

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

2.webpack的作用

*代码拆分: 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。