Webpack运行过程（1）

2024-01-09 16:00:29

webpack 是一个非常强大的工具，并且在我们的项目中已经被广泛地使用。webpack 的作用就是将源代码模块化的编译在一起，以形成我们的最终文件。虽然 webpack 非常强大，但是它也相当复杂，这使得很多初学者都对 webpack 有些畏惧，无法理解它的工作原理。

但 webpack 的作者已经对 webpack 的工作原理做了非常好的封装，使得它可以很容易的使用，所以我们并不需要去弄清楚 webpack 的运行原理。而只需学习使用 webpack 即可。

webpack 运行过程相对简单，但还是需要一步步的来讲解。所以这篇文章我们就来讲解 webpack 运行过程的第一部分。

合并配置项

webpack 运行的第一步是合并配置项。webpack 的配置项可以来自于很多地方，比如：

命令行参数
webpack.config.js 文件
package.json 文件
默认配置

webpack 会将这些配置项合并成一个最终的配置项对象。这个最终的配置项对象会包含 webpack 的所有配置信息。

实例化 Compiler

webpack 的第二步是实例化 Compiler。Compiler 是 webpack 的核心对象，它负责 webpack 的整个编译过程。

Compiler 对象包含了 webpack 的所有配置信息。它也会加载 webpack 的所有插件。

加载所有插件

webpack 的第三步是加载所有插件。webpack 插件是一个非常强大的功能，它可以扩展 webpack 的功能。

webpack 插件可以用来做很多事情，比如：

压缩代码
提取 CSS 文件
自动生成 HTML 文件

webpack 会根据配置加载所有插件。

加载入口插件 EntryPlugin

webpack 的第四步是加载入口插件 EntryPlugin。EntryPlugin 是 webpack 的一个内置插件，它负责解析 webpack 的入口文件。

webpack 的入口文件是 webpack 编译的起点。webpack 会从入口文件开始，递归地解析所有依赖的模块。

实例化 Compilation

webpack 的第五步是实例化 Compilation。Compilation 对象代表 webpack 的一次编译过程。

Compilation 对象包含了 webpack 编译过程中的所有信息。比如：

编译的文件
编译的模块
编译的依赖项
编译的错误

根据入口的数量，多次调用 Compilation 实例对象的 addEntry() 方法

webpack 的第六步是根据入口的数量，多次调用 Compilation 实例对象的 addEntry() 方法。

addEntry() 方法的作用是将入口文件添加到 Compilation 对象中。

webpack 会根据配置的入口文件数量，多次调用 addEntry() 方法。

简化版实例

为了更好地理解 webpack 的运行过程，我们来看一个简化版的 webpack 实例。

const webpack = require('webpack');

const config = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js',
  },
};

const compiler = new webpack.Compiler(config);

compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(stats.toJson());
});

这个 webpack 实例非常简单，它只包含了最基本的功能。

entry 属性指定了 webpack 的入口文件。
output 属性指定了 webpack 的输出文件。
run() 方法启动 webpack 的编译过程。

通过这个简单的 webpack 实例，我们可以更好地理解 webpack 的运行过程。

总结

这篇文章介绍了 webpack 运行过程的第一部分。我们学习了 webpack 如何合并配置项、实例化 Compiler、加载所有插件、加载入口插件 EntryPlugin、实例化 Compilation，以及根据入口的数量，多次调用 Compilation 实例对象的 addEntry() 方法。我们还学习了一个简化版的 webpack 实例，以便更好地理解 webpack 的运行过程。

我希望这篇文章对您有所帮助。如果您有任何问题，请随时给我留言。