（注：本文基于 Webpack 5.74.0 版本）
那是心情大好的一天，本咕在某大佬的启发下，决定重新打开 VSCode 写自己的网站时，却遇到了问题：
- 我通常用 less 代替 css 写样式，然而写 less 之后再在浏览器中转成 css，会遇到加载时间长的问题。
- 遇到给文件起名的时候，发现有些文件的名字虽然用途不同但是重名。
- 文件松散，不像一个前端鸽写的代码。
所以这个时候，就需要一个工具来：
- 将 less 或 其他不能被浏览器识别的文件 转化为能被识别的 css 或 js。
- 让每个文件都有独特却能理解意思的名字。
- 项目的目录结构更加规范化。
于是，我想到了使用打包工具。目前非常主流的打包工具主要有 Webpack 和 Vite 等等，虽然 Vite 更加简洁轻便，但是我为什么选 Webpack 大家都懂的 🙁
Webpack 中涉及的 5 大概念
1）entry 入口 —— 从哪开始打包
我们通常会将要打包的资源导入到入口文件中，这样就能顺着入口的指引将文件打包好。而打包好的文件，我们叫做 chunk（当然可以有多个入口，就会生成多个 chunk）
2）output 输出 —— 要把打包好的 chunk 放到哪去，给它起个你想要滴名字。
3）loader 加载器 —— 解析资源。
Webpack 相当于一个半成品，因为它只能解析 js 和 json 文件。如果想让它识别更多类型的文件的话，就需要加载器来帮助实现。
4）plugins 插件 —— 帮助 Webpack 实现更多功能。
5）mode 模式 —— 在不同场景下进行不同的配置。
- 开发模式（development），能够在开发环境中更好发挥作用；
- 生产模式（production），能够在代码即将上线时更好作用。
初始化 & 目录结构
- 首先新建文件夹并用 VSCode 打开（bushi
- 输入
npm init来初始化一个新项目！ - 安装本体→
npm install webpack webpack-cli -D - 在根目录添加以下文件夹：
dist（存放输出的 chunks），src（存放资源文件源代码），public（存放网页），config（存放配置文件）
1. 设置配置文件
首先，我们需要将 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 配置文件框架了！
2. 引入 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 就可以进行打包了！
3. 打包 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' ~
4. 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"]
5. 话说 Less ……
首先二话不说装 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 一定能成为你的帮手！