背景

由于项目中 lock 文件被删，重新安装依赖后发现许多依赖都自动升级到最新版本了，因此想着干脆对项目中的依赖进行一次统一升级。在升级了 webpack 后，顺便将一些 loader 也进行升级，升级后出现了一系列的问题。

mini-css-extract-plugin 导致 url() 引入报错

今天在 1.3.9 版本时，发现 publicPath 设成 '../' 时，引入的字体文件链接变成了这样：src:url([file:///Users/crab.huang/Project/abtest.web/node_modules/.pnpm/css-loader@6.7.3_webpack@5.77.0/node_modules/css-loader/dist/cjs.js!/Users/crab.huang/Project/abtest.web/node_modules/.pnpm/less-loader@3.0.0_less@2.7.0/node_modules/less-loader/lib/loader.js!/Users/crab.huang/Project/abtest.web/src/common/font/element-icons.ttf](file:///Users/crab.huang/Project/abtest.web/node_modules/.pnpm/css-loader@6.7.3_webpack@5.77.0/node_modules/css-loader/dist/cjs.js!/Users/crab.huang/Project/abtest.web/node_modules/.pnpm/less-loader@3.0.0_less@2.7.0/node_modules/less-loader/lib/loader.js!/Users/crab.huang/Project/abtest.web/src/common/font/element-icons.ttf))

背景

有一天发现线上打包平台报代码使用了 esnext 语法，因此感觉可能是 babel 没配置好，在探索 babel 的过程中又重新梳理了一次 webpack 相关的规则。

loader

loader 的配置中如果 exclude、include、test 都出现在同一个 loader 的配置中时，优先级是 exclude > include > test。

loader 本质上是一个数组，里面有不同的 rules 匹配规则。接受到一个文件时，会从上到下找到匹配的 rules，当匹配到对应的规则时会按顺序将代码传输到 use 下面的 loader 中，此时统一规则的 loader 则是按照从下到上的顺序执行的。

先上一个 github 地址 https://github.com/unjs/unplugin

前言

前端工具链生态是日新月异，很多人 webpack 都还没玩熟悉呢，新的 vite 都要出到 3.0 了，再说 vite 是基于 rollup 和 esbuild 的吧，这些个工具都各有优劣，都是要学习的东西。但在我看来，这些工具都有一个共同的特点：都是打包工具。打包工具需要做的事情就很简单，接收输入的文件，输出成我们想要的东西，这其中还包含了可以通过不同的插件实现对输入文件的处理，以实现混淆、注入等功能；同时打包工具大多都提供了许多钩子（hook），贯穿整个打包流程，也方便了我们对打包过程的关注和额外处理。百变不离其宗，webpack 有 loader 和 plugin，vite 扩展了设计出色的 Rollup 接口，还带了一些 vite 独特的配置项，因此有人就有了写一次代码，适配多个 bundler 的想法，unplugin 就是这样一个存在。

掘金参考文章

Webpack简介

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