大白话Webpack 怎么理解，怎么使用它？-EW帮帮网

大白话Webpack 怎么理解，怎么使用它？

一、Webpack 是啥

你可以把 Webpack 想象成一个超级管家，在咱们开发网页的过程中，会有各种各样的“物品”（也就是资源，像 CSS 文件、JavaScript 文件、图片等等），这些资源分散在不同的地方，而且有的还得按照特定顺序摆放、处理之后才能正常使用。Webpack 这个管家就负责把这些分散的资源收集起来，按照我们的要求进行打包、处理，最后变成一个或几个可以直接在网页上使用的“大包裹”，让网页能顺利运行。

二、Webpack 的基本概念

1. 入口（Entry）

入口就像是这个管家开始工作的起点。你得告诉管家从哪个“物品”开始收集，Webpack 就从这个入口文件出发，顺着文件里的各种引用关系，去把其他相关的资源都找出来。比如你有一个 index.js 文件，它引用了其他的 JavaScript 文件、CSS 文件等，那你就可以把 index.js 设为入口。

2. 出口（Output）

出口就是管家把处理好的“大包裹”放在哪里。你要给管家指定一个存放位置和文件名，Webpack 会把打包好的文件放到你指定的地方。

3. 加载器（Loaders）

不同的“物品”（资源）有不同的处理方式。加载器就像是管家的各种工具，用来处理不同类型的资源。比如 CSS 文件，Webpack 本身不知道怎么处理它，就需要用 css-loader 和 style-loader 这两个工具，把 CSS 文件变成能在 JavaScript 里使用的东西。

4. 插件（Plugins）

插件就像是管家的小助手，能帮管家完成一些更复杂的任务。比如 HtmlWebpackPlugin 这个小助手，它可以自动生成一个 HTML 文件，并且把打包好的 JavaScript 和 CSS 文件自动引入到这个 HTML 文件里。

三、怎么使用 Webpack

1. 安装 Webpack

首先你得保证电脑上安装了 Node.js 和 npm（Node.js 的包管理工具）。然后打开命令行工具，在你的项目文件夹里运行下面的命令来安装 Webpack 和 Webpack CLI（一个命令行工具，方便我们在命令行里使用 Webpack）：

npm install webpack webpack-cli --save-dev

--save-dev 表示把它们作为开发依赖安装，因为只有在开发阶段才会用到它们。

2. 创建 Webpack 配置文件

在项目根目录下创建一个 webpack.config.js 文件，这个文件就像是你给管家的工作说明书，告诉它该怎么工作。下面是一个简单的配置示例：

const path = require('path');

module.exports = {
    // 入口文件
    entry: './src/index.js', 
    // 出口配置
    output: { 
        // 打包后的文件存放的目录
        path: path.resolve(__dirname, 'dist'), 
        // 打包后的文件名
        filename: 'bundle.js' 
    },
    // 模块配置，主要是加载器
    module: { 
        rules: [
            {
                // 匹配所有的.css 文件
                test: /\.css$/, 
                use: [
                    // 把 CSS 插入到 DOM 中
                    'style-loader', 
                    // 解析 CSS 文件中的 @import 和 url() 等
                    'css-loader' 
                ]
            }
        ]
    },
    // 插件配置
    plugins: [] 
};

3. 编写入口文件

在 src 文件夹下创建 index.js 文件，并且引入一些资源，比如引入一个 CSS 文件：

import './styles.css';

// 这里可以写其他的 JavaScript 代码
console.log('Hello, Webpack!');

4. 编写 CSS 文件

在 src 文件夹下创建 styles.css 文件，写一些简单的样式：

body {
    background-color: lightblue;
}

5. 运行 Webpack

在命令行里运行下面的命令来启动 Webpack 打包：

npx webpack

npx 是一个工具，它可以直接运行项目里安装的命令。运行完这个命令后，Webpack 就会根据 webpack.config.js 里的配置，从 src/index.js 开始，把相关的资源都打包到 dist/bundle.js 文件里。

6. 创建 HTML 文件

在 dist 文件夹下创建一个 index.html 文件，并且引入打包好的 bundle.js 文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack 示例</title>
</head>

<body>
    <!-- 引入打包后的 JavaScript 文件 -->
    <script src="bundle.js"></script> 
</body>

</html>

7. 用插件自动生成 HTML 文件（可选）

为了避免手动创建和修改 HTML 文件，我们可以用 HtmlWebpackPlugin 这个插件。先安装它：

npm install html-webpack-plugin --save-dev

然后修改 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            // HTML 文件的标题
            title: 'Webpack 示例', 
            // 生成的 HTML 文件的文件名
            filename: 'index.html' 
        })
    ]
};

这样，每次打包的时候，HtmlWebpackPlugin 会自动生成一个 index.html 文件，并且把 bundle.js 文件自动引入进去。

四、总结

Webpack 就是一个强大的资源打包工具，通过入口找到所有相关资源，用加载器处理不同类型的资源，用插件完成一些额外的任务，最后把处理好的资源打包成一个或几个文件。按照上面的步骤，你就可以在项目里使用 Webpack 来管理和打包资源啦。

加载器和插件的区别是什么

咱把Webpack里的加载器和插件想象成装修房子时的不同角色，这样就能轻松理解它们的区别啦。

加载器：专业的材料加工师傅

主要任务
加载器就像是装修房子时那些专业的材料加工师傅。在装修过程中，会用到各种各样的材料，比如木材、瓷砖、油漆等。这些材料就好比我们写代码时用到的不同类型的文件，像CSS文件、图片文件、字体文件等。而Webpack本身就像一个大型的装修工厂，它只认识一种特定的“材料”——JavaScript文件，对于其他类型的“材料”，它不知道该怎么处理。这时候加载器就上场了，每个加载器都是处理特定“材料”的专家。
工作方式
加载器是针对单个“材料”（文件）进行处理的。当Webpack遇到一个非JavaScript文件时，就会把这个文件交给对应的加载器。比如遇到CSS文件，就交给CSS加载器处理；遇到图片文件，就交给图片加载器处理。加载器会把这些文件“加工”成Webpack能理解的形式，就像木材加工师傅把木材加工成合适的形状和尺寸，让工厂可以继续使用。
常见例子
- css-loader和style-loader：CSS文件就像是一桶没调好的油漆，css-loader就像一个油漆调配师，它会解析CSS文件里的各种引用关系，比如里面引用了其他的CSS文件或者图片。而style-loader就像一个油漆工，把调配好的油漆（CSS样式）刷到房子（网页）上，让房子变得漂亮。
- file-loader：图片文件就像是一堆漂亮的装饰品，file-loader就像一个搬运工，它会把这些装饰品搬到合适的位置（打包后的目录），并且给每个装饰品贴上一个标签（返回引用路径），这样我们在房子里就能知道在哪里可以找到这些装饰品。

插件：装修工程的大管家和特种工人

主要任务
插件就像是装修工程的大管家和一些特种工人。大管家负责统筹整个装修工程，安排各个环节的工作，确保工程顺利进行；特种工人则有一些特殊技能，能完成一些普通工人做不到的事情。在Webpack里，插件可以处理整个构建过程中的各种复杂任务，不仅仅是单个文件的处理。
工作方式
插件是在整个装修工程（Webpack构建过程）的不同阶段发挥作用的。它们会在特定的时间点介入，对整个工程进行优化、调整或者添加一些额外的功能。比如在工程开始前，大管家会清理工地（删除之前打包生成的旧文件）；在工程快结束时，特种工人会对房子进行最后的精细打磨（压缩代码）。
常见例子
- HtmlWebpackPlugin：它就像一个房屋设计师，会自动设计并建造房子的框架（生成HTML文件），然后把装修好的各个部分（打包好的JavaScript和CSS文件）合理地安装到房子里，让房子可以正常使用。
- CleanWebpackPlugin：这是一个非常负责的清洁工，在每次开始新的装修工程之前，它会把工地上之前留下的垃圾（旧的打包文件）清理干净，保证工地整洁，为新的工程做好准备。
- TerserPlugin：它就像一个专业的瘦身教练，会对房子里多余的东西（冗余的代码）进行清理和压缩，让房子变得更加紧凑，这样房子的空间利用效率更高（打包后的文件体积更小），住起来也更舒服（加载速度更快）。

总结

加载器主要是对单个文件进行加工处理，让Webpack能认识和使用这些文件；而插件则是对整个构建过程进行干预和优化，负责统筹和完成一些复杂的任务。它们就像装修房子时的不同角色，各司其职，共同让Webpack这个装修工厂高效地运转起来。

大白话Webpack 怎么理解，怎么使用它？