（注：本文以 Webpack 5.74.* 版本为基础编写）

那是心情大好的一天，本咕在某大佬的启发下，决定重新打开 VSCode 写自己的网站时，却遇到了问题：

1. 我通常用 less 代替 CSS 写样式，然而写 less 之后再在浏览器中转成 CSS，会遇到加载时间长的问题。
2. 遇到给文件起名的时候，发现有些文件的名字虽然用途不同但是重名。
3. 文件松散，不像一个前端鸽写的代码。

所以这个时候，就需要一个工具来：

1. 将 less 或其他不能被浏览器识别的文件转化为能被识别的 CSS 或 JS。
2. 让每个文件都有独特却能理解意思的名字。
3. 项目的目录结构更加规范化。

于是，我想到了使用打包工具。目前非常主流的打包工具主要有 Webpack 和 Vite 等，虽然 Vite 更加简洁轻便，但是我为什么选 Webpack，都懂 🙁

Webpack 中涉及的 5 大概念

1）entry，即入口 —— 从哪开始打包

我们通常会将要打包的资源导入到入口文件中，这样就能顺着入口的指引将文件打包好。而打包好的文件，我们叫做 chunk（当然可以有多个入口，就会生成多个 chunk）

2）output，即输出 —— 要把打包好的 chunk 放到哪去，给它起个你想要的名字。

3）loader，即加载器 —— 解析资源。

Webpack 相当于一个半成品，因为它只能解析 js 和 json 文件。如果想让它识别更多类型的文件的话，就需要加载器来帮助实现。

4）plugins，即插件 —— 帮助 Webpack 实现更多功能。

5）mode，即模式 —— 在不同场景下进行不同的配置。

1. 开发模式（development），能够在开发环境中更好发挥作用；
2. 生产模式（production），能够在代码即将上线时更好作用。

初始化 & 目录结构

1. 首先新建文件夹并用 VSCode 打开（划掉

2. 输入 npm init 来初始化一个新项目！

3. 安装本体 → npm install webpack webpack-cli -D

4. 在根目录添加以下文件夹：dist（存放输出的 chunks），src（存放资源文件源代码），public（存放网页），config（存放配置文件）

设置配置文件

首先，我们需要将 5 个概念与代码相结合。

在 config 文件夹中新建 webpack.config.js，写入以下代码。

const path = require('path');
module.exports = {
 
    // 1. 入口
    entry: {
        index: './src/index.js' // 创建以 index.js 开始打包的叫做 index 的 chunk
    },
 
    // 2. 输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        // 输出路径必须要用绝对路径，而 __dirname 是 Node.js 内置的帮我们设置绝对路径的参数，这里指的是输出到'dist'文件夹中
        filename: './js/[name].[contenthash:8].js',
        // [name]是原文件的名字，而[contenthash]是该文件独一无二的哈希值，8代表取的位数
    },
 
    // 3. 加载器
    module: {},
 
    // 4. 插件
    plugins: [],
 
    // 5. 模式
    mode: 'development'
}

这就是最基本的 Webpack 配置文件框架了！

引入 HTML 的支持

虽然已经有了基本的框架，但此时的 Webpack 仍然是毛坯房，无法支持 HTML 文件的打包。

话说 HTML 为啥要打包呢？–>

1. 能够压缩代码
2. 能够自动引入已经打包好的资源文件 这里需要安装插件 —— HtmlWebpackPlugin 来实现此功能 |ू･ω･` )

npm install html-webpack-plugin

现在回到 webpack.config.js，添加这个插件吧！

首先在 module.exports 之前导入插件：

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

然后再在 plugin 中添加：

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "../public/index.html"), // 原文件路径
        filename: "index.html", // 输出的名称
        chunks: all // 导入所有的 chunk
    }),
],

现在我们随便写一点东西！

/public/index.html 写一个 h1 的 Hello, world

/src/index.js：

var a = 1;
var b = 2;
console.log(a + b);
console.log("This is packed by Webpack 5!");

为了编写方便，我们在根目录下 package.json 的 scripts 中添加以下代码

"start": "npx webpack --config ./config/webpack.config.js"

接下来，我们使用 npm start 就可以进行打包了！

打包 CSS 文件

这次，加载 CSS 文件可不是插件了，而是一个 loader ，一个名曰 css-loader ，另一个名曰 style-loader。

首先安装这两个 loader 吧 →

npm install style-loader css-loader -D

接下来在配置文件中引入：

module: {
    rules: [{
        test: /\.css$/, // 正则，表示匹配所有 css 后缀的文件进行处理
        use: ["style-loader", "css-loader"] // 执行顺序从后到前，不能搞反的！
    }]
}

接下来写一个 /src/styles/index.css ，比如 → body { background-color: #607d8b; }

最后在入口处引入，也就是在其内写一个 import './styles/index.css' ~

CSS 的独立运动！

虽然如此，但是 CSS 样式却被写到了 style 标签中，这显然不是我们想要的结果🤔。

所以我们需要一个东西，能把 CSS 提取成单独的文件。

欸，还真有，就是 MiniCssExtractPlugin ，直接安装！

npm i mini-css-extract-plugin -D

然后按照 HtmlWebpackPlugin 同理的方法导入，然后在 plugins 里面加上：

new MiniCssExtractPlugin({
    filename: './styles/[name].[contenthash:8].css' // 输出文件名及路径
}),

同时记得要把上面提到的 "style-loader" 改成这个插件内置的 MiniCssExtractPlugin.loader ~

use: [MiniCssExtractPlugin.loader, "css-loader"]

其它样式语言的支持

首先二话不说装 Less！

npm install less less-loader -D

问题来了：less-loader 这玩意儿放哪儿？

我们先捋清楚逻辑：Less 将 *.less 文件转换为 CSS 的语法，所以应该先运行 less-loader 再运行 css-loader 才对。

所以我们应该这样：（注意：index.js 中的文件名也要改）

test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]

然后浅写一个 index.less：

body {
    background-color: #607d8b;
    h1 {
        color: #fff;
    }
}

好！保存！打包！

当然可能目前还是不够便捷，但是当后续给各位介绍开发和生产模式，以及各种工具之后，相信 Webpack 一定能成为你的帮手！