webpack5工作流程图解

Published on
Reading time
5 min read
Likes
Authors
虽然目前大部分主流前端框架已经弃用了webpack(目前任然坚守 webpack 的 主流框架只剩 nextjs 了),但是webpack作为一个模块打包工具,在前端开发中仍然有着重要的地位。本文将详细解释webpack的工作流程,以及一些常见的配置。

1. 基本概念

为什么要使用webpack

Benefits of Using Webpack

  1. 提高开发效率
  • 支持模块化开发,提供了一种模块化的开发方式
  • 支持热更新,可以实时预览代码的变化
  • 处理css,js优雅降级,兼容性处理
  • 可以配置自动化构建项目
  1. 提升项目性能
  • 代码压缩,减小文件体积
  • 代码分割,减少首屏加载时间
  • 代码优化,提升代码运行效率

2. 工作流程

webpack 如何工作的呢?下面是一个简单的流程11图:


graph TD
  style A fill:#f9f,stroke:#333,stroke-width:2px;
  style B fill:#bbf,stroke:#333,stroke-width:2px;
  style C fill:#bfb,stroke:#333,stroke-width:2px;
  style D fill:#fbf,stroke:#333,stroke-width:2px;
  style E fill:#ffb,stroke:#333,stroke-width:2px;
  style F fill:#bdf,stroke:#333,stroke-width:2px;
  style G fill:#dfb,stroke:#333,stroke-width:2px;

  A[Entry 入口文件] --> B[Module Bundler 模块打包器]
  B --> C[Dependency Graph 依赖图]
  C --> D[Loaders 加载器]
  D --> E[Plugins 插件]
  E --> F[Output 输出文件]
  F --> G[Browser 浏览器加载]

详细解释

  1. Entry (入口文件):
  • Webpack 从一个或多个入口文件开始构建依赖图。入口文件是 Webpack 开始打包的起点，通常是 src/index.js。 配置在 webpack.config.js 文件中。
javascriptEavan.dev
module.exports = {
  entry: './src/index.js', // 入口文件，可以是单一文件或多个文件
}
  1. Module Bundler (模块打包器):
  • Webpack 从入口文件开始，递归地解析每个模块的依赖项。通过解析 import 或 require 语句，Webpack 构建出整个项目的依赖图（Dependency Graph），确保每个模块都能按正确的顺序被加载。

graph TD
  A[index.js] --> B[module1.js]
  A --> C[module2.js]
  A --> D[module3.js]
  B --> E[module4.js]
  C --> E
  C --> F[module5.js]
  D --> F

  style A fill:#f9f,stroke:#333,stroke-width:4px
  1. Dependency Graph (依赖图):
  • 依赖图是 Webpack 打包过程的核心。Webpack 通过解析每个模块的依赖关系，构建一个表示模块如何相互依赖的有向图。这张图帮助 Webpack 确定模块的加载顺序，并确保所有依赖项都能正确地被解析和打包。
Dependency Graph | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
domain faviconwebpack.js.org
preview image
  1. Loaders (加载器):
  • Loaders 是 Webpack 中用于转换不同类型文件的工具。例如，css-loader 可以将 CSS 文件转换为 JavaScript 模块，babel-loader 则可以将 ES6 代码转换为兼容浏览器的 ES5 代码。加载器通过在 webpack.config.js 中的 module.rules 配置，并按照从右到左的顺序执行：
javascriptEavan.dev
module: {
  rules: [
    {
      test: /\.css$/,  // 匹配 .css 文件
      use: ['style-loader', 'css-loader'],  // 从右向左执行
    },
  ],
}
  1. Plugins (插件):
  • Plugins 用于执行比 Loaders 更复杂的任务，如打包优化、资源注入、环境变量注入等。与 Loaders 处理文件转换不同，Plugins 可以在 Webpack 的整个构建生命周期的各个阶段介入。例如，HtmlWebpackPlugin 可以自动生成 HTML 文件并注入打包后的 JavaScript 文件：
javascriptEavan.dev
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 基于模板生成 HTML 文件
    }),
  ],
}
  1. Output (输出文件):
  • Webpack 会根据 output 选项，将打包后的文件输出到指定的目录。通常是 dist/ 目录。你可以通过 filename 字段配置输出文件的名称，并使用模板字符串动态命名文件：
javascriptEavan.dev
module.exports = {
  output: {
    filename: '[name].[contenthash].js', // 动态生成文件名
    path: path.resolve(__dirname, 'dist'), // 输出目录
  },
}
  1. Browser (浏览器加载):
  • 最终，生成的打包文件会被浏览器加载和执行。这些文件通常通过 <script> 标签引入到 HTML 文件中。例如，使用 HtmlWebpackPlugin 生成的 HTML 文件会自动包含所有打包后的资源。在浏览器中，JavaScript 文件会被执行，CSS 文件会被应用，从而完成应用的渲染和交互。