(注:本文基于 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 一定能成为你的帮手!