提示

webpack中文文档：https://www.webpackjs.com/concepts/ (opens new window)

1. 简介

• 当我们习惯了在 Node.js 中编写代码的方式后，再回到前端编写 HTML、CSS、JavaScript 时，会感觉到各种不便。例如，不能放心地使用模块化规范（浏览器兼容性问题），即使可以使用模块化规范，也会面临模块过多时的加载问题。
• 因此，我们迫切希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。
• 构建工具就起到了这样的作用，通过构建工具可以将使用 ESM 规范编写的代码转换为旧的 JavaScript 语法，这样可以使得所有的浏览器都可以支持代码。

2. Webpack

2.1 概念

本质上，Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 Webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph) (opens new window)，然后将项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示内容。【按需打包】

Webpack 在 Node.js 中运行

2.2 使用步骤

1. 初始化项目

• 首先，我们需要初始化一个新的 Node.js 项目。打开终端并在项目目录中运行以下命令：

yarn init -y

• 该命令会创建一个默认的 package.json 文件，-y 标志表示接受所有默认选项。

2. 安装依赖

• 接下来，我们需要安装 Webpack 和 Webpack CLI。这两个包分别用于打包和命令行操作。在终端中运行以下命令：

yarn add -D webpack webpack-cli

• -D 表示将这些包作为开发依赖添加到项目中。

3. 创建项目结构

• 在项目根目录下创建一个名为 src 的文件夹，然后在 src 文件夹中创建一个 index.js 文件。这个文件将作为项目的入口文件。

• 你的项目结构应该如下所示：

my-project/
├── src/
│   └── index.js
├── package.json
└── yarn.lock

4. 编写代码

• 在 src/index.js 文件中编写一些简单的 JavaScript 代码，例如：

console.log("Hello, Webpack!");

5. 配置 Webpack

• 在项目根目录下创建一个名为 webpack.config.js 的文件。这是 Webpack 的配置文件，我们将在其中定义打包规则。

• 配置文件的基本内容如下：

// 1. 引入 Node.js 的路径模块，用于处理和转换文件路径
const path = require("path");

// 2. 导出 webpack 的配置对象
module.exports = {
    // 2.1 配置 webpack 的打包模式，这里设置为生产模式
    mode: "production", 
    
    // 2.2 配置入口文件，即 webpack 开始构建依赖图的文件
    entry: "./src/index.js",
    
    // 2.3 配置输出文件，即打包后的文件存放位置
    output: {
        // 2.3.1 指定打包后的文件存放目录，使用 path.resolve 将相对路径转换为绝对路径
        path: path.resolve(__dirname, "dist"),
        // 2.3.2 指定打包后的文件名
        filename: "bundle.js"
    }, 
    
    // 2.4 配置模块处理规则
    module: {
        // 2.4.1 配置不同类型文件的处理规则
        rules: [
            {
                // 2.4.1.1 匹配所有以 .css 结尾的文件，正则表达式中的 \\. 表示转义字符
                test: /\.css$/i,
                // 2.4.1.2 使用的 loader，先使用 css-loader 解析 CSS 文件，然后使用 style-loader 将 CSS 插入到 DOM 中
                use: ["style-loader", "css-loader"]
            }
        ]
    }
};

• 配置文件中，我们定义了 entry 和 output，分别指定了入口文件和输出文件的位置。此外，还配置了一个简单的模块规则，用于处理 CSS 文件。

6. 打包代码

• 现在我们可以使用 Webpack 对代码进行打包了。在终端中运行以下命令：

yarn webpack

• Webpack 会根据配置文件中的规则对代码进行打包，并将结果输出到 dist 文件夹中。打包后的文件名为 bundle.js。

3. 实际开发中需要自己配置webpack吗？