Module 02 · Introduction to Automated Build Tools (Webpack)自动化构建工具（Webpack）简介

Essential Concepts of WebpackWebpack的基本概念

观看完本视频后，您将能够：

解释 Webpack的四个核心概念
定义优化Webpack功能的组件

Webpack的作用

Webpack 是一个 模块打包工具，用于将代码组织成模块。如果一个文件依赖另一个文件，Webpack 会将其视为依赖关系。初始配置从单个模块开始，然后处理所有的依赖关系，可能是直接的，也可能是间接的。这就形成了一个 依赖图，Webpack 会基于此依赖图来打包所有模块。

Webpack的四大核心概念

Webpack的核心概念包括：

Entry（入口）
Output（输出）
Loaders（加载器）
Plugins（插件）

接下来，我们将逐一详细讨论这些概念。

1Entry（入口）

入口（Entry） 是前端项目收集依赖关系的起始点。通常，这会是一个基本的 JavaScript 文件，这些依赖关系随后会形成一个依赖图。

默认入口点为：src/index.js，但可以进行配置。
Webpack 可以有多个入口点，分别生成不同的模块，并且会在整个应用中重复这个过程。

例如：

module.exports = {
  entry: './src/index.js', // 入口文件
};

2Output（输出）

输出（Output） 指的是通过构建过程生成的静态文件和 JavaScript 文件。这些文件会集中存放在指定的输出目录中。

默认输出目录为：webpack dist/，但可以自定义配置。
输出配置告诉 Webpack 应该如何以及在哪里放置打包后的文件。

例如：

module.exports = {
  output: {
    filename: 'My-Webpack.bundle.js', // 输出文件名
    path: __dirname + '/dist', // 输出路径
  },
};

3Loaders（加载器）

Webpack 默认只理解 JavaScript 和 JSON 文件，因此 加载器（Loaders） 用于处理其他类型的文件，并将它们转换为有效的模块。它们可以预处理非 JavaScript 模块的源代码，在添加到依赖图之前进行转换。

加载器 使得 Webpack 能够处理多种文件扩展名，如 CSS、SASS、图片等。

例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,  // 匹配 .css 文件
        use: ['style-loader', 'css-loader'], // 使用的加载器
      },
    ],
  },
};

4Plugins（插件）

插件（Plugins） 使得 Webpack 能够执行更广泛的任务，比如：

优化打包：如优化文件大小，移除不必要的代码
资源管理：例如处理静态资源（图片、字体）
环境变量注入：可以根据不同的环境设置不同的变量
压缩文件：例如将 JavaScript 或 CSS 文件压缩成较小的文件

插件是 Webpack 的 第三方扩展，它们可以改变 Webpack 的工作方式。

例如，提取 CSS 文件的插件配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
};

其他优化Webpack功能的概念

1.Chunk（代码块）

Chunk 是从模块中提取出的代码块。它们通常用于 代码分割（Code Splitting），将应用分割成多个块以便按需加载。

2.Assets（资产）

Assets 指的是构建过程中打包的静态文件，这些文件可以是图片、字体，甚至是视频文件。Webpack 支持将这些资源进行打包。

3.配置文件

Webpack 支持通过配置文件来管理复杂结构的项目，比起手动在终端输入多个命令，使用配置文件更加高效。

4.Bundles（打包文件）

Bundles（打包文件） 将源代码与分发代码分开。源代码是我们编写和编辑的代码，而分发代码则是经过优化后最终加载到浏览器中的代码。

总结

在本视频中，您学习了：

Webpack 是一个模块打包工具，它依赖于依赖图。
Entry（入口） 是 Webpack 创建依赖图的起始点。
Output（输出） 是通过构建过程生成的静态和 JavaScript 文件的存放位置。
Loaders（加载器） 用于将其他文件类型转换为 JavaScript 和 JSON 文件。
Plugins（插件） 允许 Webpack 执行一系列任务，包括优化打包、资源管理、环境变量注入等。

这些概念将帮助您更好地理解 Webpack 的工作原理和如何在开发过程中进行高效的资源管理和构建。