webpack打包原理

Posted 2023-03-25

参考技术A webpack 是一个现代 javascript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

webpack.config.js里配置

webpack.config.js里配置

webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块

通过require()将想要使用的插件添加到plugins数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

npm init -y
安装webpack
npm i webpack_dome webpack-cli -D

在根目录下新建src文件夹,在src里新建index.js文件
index.js文件

创建并配置webpack.config.js文件
webpack.config.js文件

配置 package.json 文件，在scripts中添加'build'使得运行 npm run build 可以直接执行 webpack 命令,在根目录内会生成dist文件夹,里面是对应生成的文件,
安装 npm install --save-dev express webpack-dev-middleware ,添加'start'使得运行 npm run start 可以直接执行 webpack-dev-server 命令,
package.json 文件

再次打包时需要删除旧文件
执行 npm install clean-webpack-plugin --save-dev 命令，安装依赖。
修改webpack.config.js文件配置

新建index.html文件,并手动引入打包后的js文件

执行 npm i html-webpack-plugin --save-dev 命令，安装依赖。
新建index.ejs文件

修改webpack.config.js文件配置

重新运行 npm run build，生成新的 dist 包，包内会生成一个新的 index.html 文件，并自动引入了 index.min.js 文件。

执行 npm i open-browser-webpack-plugin webpack-dev-server --save-dev 命令，安装依赖。
修改 webpack.config.js 配置

修改webpack.config.js文件配置

webpack 4 打包原理

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

打包过程可以拆分为四步：

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

以上是打包的基本机制，而webpack的打包过程，会基于这些基本步骤进行扩展，主要有以下步骤：

1. 初始化参数 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2. 开始编译 用上一步得到的参数初始Compiler对象，加载所有配置的插件，通 过执行对象的run方法开始执行编译
3. 确定入口 根据配置中的 Entry 找出所有入口文件
4. 编译模块 从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5. 完成模块编译 在经过第4步使用 Loader 翻译完所有模块后， 得到了每个模块被编译后的最终内容及它们之间的依赖关系
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。

整个流程概括为3个阶段，初始化、编译、输出。而在每个阶段中又会发生很多事件，Webpack会将这些事件广播出来供Plugin使用。具体钩子，可以看官方文档：webpack.js.org/api/compile

更详细的分析：Webpack4打包机制原理简析

所以 loader 和 plugin 什么区别

功能上来看，loader 只是为了解析某种 webpack 无法使用的模块，而 plugin 是扩展 webpack 功能的。

影响面来看，loader 只影响编译模块阶段。而 plugin 利用 webpack 打包流程中不断广播的事件，可直接操作变异对象，影响的范围大得多。

参考

Webpack 深入浅出之公司级分享总结(内附完整ppt)

Webpack4打包机制原理简析