Document

--- theme: hydrogen highlight: atom-one-dark-reasonable --- # 案例地址 Github：[pnpm-monorepo-react](https://github.com/Alicehhhmm/Norush-Monorepo-react.git) # 1.前言 Monorepo 最早的出处是软件开发策略的一个分支，”mono” 表示单一 “repo” 是”repository”的缩写，是指将多个项目的代码存储在同一个版本库中的软件开发方法。多个项目共用一个代码库来管理依赖关系，同一套配置文件，统一构建部署流程等等。这种方法可以提高代码共享和重用的效率，同时也可以简化代码管理和部署过程。平时常见的 Reactjs、Vuejs、Babel 也是 monorepo 管理架构。目前国内Monorepo 架构常见的管理方法有： * **npm** * **yarn** * **lerna** -----(例如：Antd、ahooks) * **pnpm** -----(例如：vite、nextjs) 不管使用什么方式进行管理，在确定将项目设计成 Monorepo 架构前，需要考虑以下几点。 1. 项目规模较大，需要多个子项目协同开发和维护。 2. 子项目之间存在明确的依赖关系，需要共享代码和资源。 3. 需要统一管理和控制版本，方便协作和发布。 4. 需要提高开发效率和代码复用性。 5. 需要统一的构建、测试和部署流程。如果满足以上几点的需求条件，可以设计成monorepo的架构形式，但是也需要良好的组织方式。
下面让我们一起来看看构建一个Monorepo 架构需要完成那些步骤吧！ *** # 2.环境&技术栈 * **Node** : v18.x * **WebPack 5** * **React** : v18.x || 19.x * **TypeScript** : v5.x * **Tailwindcss**: v3.x * **Bable** * **postCsss** * **pnpm** ：v9.x *** # 3.具体实现步骤 ## 3.1.初始化项目 👉 使用cmd终端或者Vsc编辑器终端初始化项目文件 ```bash mkdir monorepo-react cd monorepo-react pnpm init ``` 💻 最终效果图
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/542e5dc348214304a9d5932bf33ccdb8~tplv-k3u1fbpfcp-zoom-1.image#?w=1124\&h=453\&s=50480\&e=png\&b=1e1e1e) *** ## 3.2.目录结构设计项目目录结构的布局设计，可能会直接影响到你项目后续的开发和维护。一个好的组织架构关系能让后续的开发和维护更爽快。一般情况下Monorepo架构的文件布局，主要以packages文件为主包。然后通过结合各类工具包和配置文件组合成项目的整体架构。拿ReactJs 和 VueJs 为例：
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c099126bc5f4fbfb9c3c137d3b179d2~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=902\&s=189627\&e=png\&b=1f1f1f)![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7245866f66284627bf69101491d88505~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=902\&s=207888\&e=png\&b=1f1f1f)
可以发现不管是[ReactJs](https://github1s.com/facebook/react/tree/main) 还是 [VueJs](https://github1s.com/vuejs/core/tree/main) ，我们平常使用的一些核心方法都是封装成各个单独的包，放在packages文件下配合各类工具和插件进行管理的。 💻 当然也还有另一种目录结构是这样的：
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e6e91c206784f5ca90bdf7f9062add8~tplv-k3u1fbpfcp-zoom-1.image#?w=899\&h=374\&s=24932\&e=png\&b=1c1c1c)
它也是以packages文件为根目录管理，但不同的是这个结构的各类包都是在apps文件下的；公用组件放在 components 文件；公用工具放在 libs 文件 ```markdown |-packages |- apps: web 项目 |- components: 公用组件库 |- libs: 公用工具 ``` 不管是使用那种结构，只要有利于项目组织各个包之间的关联关系，都是好的设计。在这里我们就参考一下他们**目录结构**的设计方式去实现自己 Monorepo 管理架构目录。
💻 最终的目录结构如下： ```markdown ├── husky // git提交拦截 ├── config // 配置相关 ├── packages // 主包 │ ├── react-temp // React 子包 │ │ ├── scripts // Webpack相关配置 │ │ │ ├── webpack.base.js // Webpack基础配置 │ │ │ ├── webpack.dev.js // Webpack开发环境配置 │ │ │ ├── webpack.prod.js // Webpack生产环境配置 │ │ ├── src // 子包源码 │ │ ├── .babelrc // 子包babel解析配置 │ │ ├── .browserslistrc // 浏览器兼容配置 │ │ ├── .postcssrc.json // CSS解析配置 │ │ ├── package.json // 子包package.json │ │ ├── tailwind.config.js // 子包原子化CSS配置 │ │ └── tsconfig.json // 子包TSC │ │ │ ├── shared // 全局共享子包 │ │ └── // 按需配置 │ │ ├── static // 主包三方不打包资源 │ └── │ │ ├── .eslintrc.json // eslint配置 ├── .gitignore // git 忽略项 ├── .prettierrc.json // 代码美化配置 ├── pnpm-workspace.yaml // pnpm工作空间配置 └── package.json // package.json ``` ## 3.3.配置pnpm工作区间 workspace 👉 在根目录下新建[pnpm-workspace.yaml](https://pnpm.io/zh/pnpm-workspace_yaml) ```yaml packages: - 'packages/*' ``` 配置pnpm 工作区间的默认管理根路径，方便pnpm 对文件的分析管理。 *** ## 3.4.初始化子项目在这里我们主要新建两个子项目，react-temp 、shared 用于案例分析和实现。

👉 在packages文件下新建，并初始化子项目 ```bash # 新建react包 mkdir react.temp cd react.temp pnpm init # 新建shared包 mkdir shared cd shared pnpm init ``` 👉 初始化好子项目后，分别在 package.json 中进行配置： * 给包名添加自己的包管理前缀 **@norush** * 以及添加node启动模式 "**type**": "module" * 修包改根路径的指向 "**main**": "src/index.js" ```JSON { "name": "@norush/react.temp", "version": "1.0.0", "description": "", "main": "src/index.js", "scripts": { "test": "node src/index.js" }, "type": "module", "keywords": [], "author": "", "license": "ISC" } ``` 💻 当前目录结构如下
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1537536d8b74948ab54488449e36004~tplv-k3u1fbpfcp-zoom-1.image#?w=1108\&h=479\&s=67453\&e=png\&b=1e1e1e)
到这里我们以基本完成俩个子包的初始化，那么怎么让他们建立联系呢?
说白了就是，如何在一个包(react-temp)中，引入另一个包（shared）并使用。 *** ## 3.5.建立子包之间的关联要解决在一个包中，引入并使用另一个的问题，其实就是需要建立起包与包之间的联系。
通常情况下在某个项目中需要使用到另一个包时都是通过，**npm install** 安装后才能使用的，那么在monorepo模式中，项目怎么使用别的包呢？在这里我们通过 **pnpm** 的 **--filter**方法将本项目中的一个包，导入另一个包 ```bash pnpm add @norush/shared --filter @norush/react.temp # or @norush/shared: `pnpm link` @norush/react.temp: `pnpm link @proj/react-components` ``` > ‼️注意: 在pnpm@9.x 版本后使用[ workspace](https://pnpm.io/zh/workspaces#%E5%B7%A5%E4%BD%9C%E7%A9%BA%E9%97%B4%E5%8D%8F%E8%AE%AE-workspace) 需要在根目录`.npmrc`配置 [link-workspace-packages](link-workspace-packages=true%20%20%20%20#%20https://pnpm.io/npmrc#link-workspace-packages) 将@norush/shared 包添加到需要使用的包中 👉 在**monorepoReact**项目根目录下执行以上命令后，你将在packages/react-temp/package.json 包中发现多了一个**workspace:^** 依赖。它让 react-temp 包与 shared 链接起来。这种链接方式通常又称之为**软链接。** ```json "dependencies": { "@norush/shared": "workspace:^" } ``` 尽然链接已经构建，那么让我们来测试是否真的连接起来了 👉 先在shared/src/index.js 中导出一些方法 ```javascript export const getID = () => `随机数：${Math.random()}`; export default function () { console.log("hello world!"); } ``` 👉 在react-temp 包中使用，另一个包导出的方法 ```javascript import { getID } from "@norush/shared"; import hello from "@norush/shared"; console.log(getID()); console.log(hello()); ``` 💻 最终调试结果如下
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b821893639994ed88cbad500abf86c7c~tplv-k3u1fbpfcp-zoom-1.image#?w=1170\&h=281\&s=41330\&e=png\&b=1a1717)通过调式发现可以在react-temp 包中正常使用，shared 包中的方法。 *** ## 3.6.安装配置Eslint & Prettier **eslint** ：一般多用来做代码的检测（逻辑、功能）
**prettier** ：一般用来做代码格式化，美化代码提高开发效率 👉 在根目录下安装eslint ```bash pnpm add eslint -D -w npx eslint --init ``` 初始化话 **init**后会有如下选择 ```markdown √ How would you like to use ESLint? · problems √ What type of modules does your project use? · esm √ Which framework does your project use? · react √ Does your project use TypeScript? · No / Yes √ Where does your code run? · browser, node √ What format do you want your config file to be in? · JSON The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest eslint-plugin-react@latest @typescript-eslint/parser@latest √ Would you like to install them now? · No / Yes √ Which package manager do you want to use? · pnpm ``` 选择安装 TypeScript 时，由于命令行自动化，不给我们加 w，所以会出现错误无法自动安装的情况。
如果需要 TypeScript 需要手动安装 👉 手动安装 TypeScript ```bash pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser -D -w pnpm add eslint-plugin-react -D -w ``` 💻 执行完以上步骤后会得到 .eslintrc.json 的初始化。效果如下
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a462715709944658196ee4bb4993edf~tplv-k3u1fbpfcp-zoom-1.image#?w=1139\&h=733\&s=92012\&e=png\&b=1e1e1e)
到这里 Eslint 的安装以基本完成了，接下来就是安装prettier. 👉 在根目录下继续安装prettier ```bash pnpm add prettier -D -w ``` 👉 创建空文件 **.prettierrc.json** ```bash echo {}> .prettierrc.json ``` 👉 配置自己 .prettierrc.json ```jsx { "printWidth": 80, "tabWidth": 4, "useTabs": true, "semi": false, "singleQuote": true, "trailingComma": "none" } ``` 👉 将prettier配置到 **.eslintrc.json** ```markdown pnpm add eslint-plugin-prettier -D -w pnpm add eslint-config-prettier -D -w //为了防止 Prettier 与 ESLint 的配置冲突 ``` 👉 在 .eslintrc.json 中手动配置 prettier ```json "plugins": [ "@typescript-eslint", "react", "prettier" ], ``` 到这里最基本的 Eslint & Prettier 安装和配置已经完成了。 *** ## 3.7.安装配置Husky 🐶 谐音“哈士奇”，看门的修狗。
如果使用git来管理仓库，你可以用它来检查提交消息、运行测试、检查代码等等。 👉 初始化Git ```markdown git init ``` 👉 配置gitignore ```md # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* node_modules dist dist-ssr # Editor directories and files .vscode/* !.vscode/extensions.json .idea .DS_Store *.suo *.ntvs* *.njsproj *.sln *.sw? *.local *.iml ``` 👉 初始化并安装husky ```bash npx husky-init npx husky add .husky/pre-commit 'npm run test' // 添加提交时执行的命令 npx husky add .husky/post-commit 'npm run test' ``` 这样就可以在提交代码时自动进行测试了,但前提是需要配置有测试test。了解更多[husky ](https://github.com/typicode/husky) *** ## 3.8.安装配置TypeScript 使用到 TypeScript需要有类型检测，一下情况下分两种情况： 1. 项目中有使用 **Babel** 的直接使用： **@babel/preset-typescript + ts**c 做类型检查 2. 项目中没有有使用 **Babel**时使用：**tsc + ts-loader** 做类型检查它们之间的区别在于：
**ts-loader : **是在内部调用了 typescript 的官方编译器 tsc ，所以 ts-loader 和 tsc 可以共用 tsconfig.json
**@babel/preset-typescript ：** 它只会做编译，不会进行类型检查，所以我们需要用到 tsc 的配置做类型检查 👉 在子包（react-temp）中初始化 **tsconfig.json** ```markdown tsc --init ``` 👉 在 \*\*tsconfig.json \*\*中添加或打开相关配置 ```JSON { "compilerOptions": { "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ "lib": ["DOM", "DOM.Iterable", "ESNext"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ "jsx": "react", /* Specify what JSX code is generated. */ "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ /* Modules */ "module": "ESNext", /* Specify what module code is generated. */ "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ "resolveJsonModule": true, /* Enable importing .json files */ /* JavaScript Support */ "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ /* Emit */ "noEmit": true, // 不输出文件，只做类型检查 /* Disable emitting files from a compilation. */ /* Interop Constraints */ "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ /* Type Checking */ "strict": true, /* Enable all strict type-checking options. */ /* Completeness */ "skipLibCheck": true /* Skip type checking all .d.ts files. */ }, "include": [ "./src/**/*" ], "exclude": [ "node_modules" ] } ``` 由于后续需要使用 webpack 打包和babel 编译输出，所以需要配置"noEmit": true, 不输出文件。为了能在开发的包环境中使用到刚刚配置的 Ts 校验 ,我们还需要将原来的 react-temp 包配置成可用react开发环境。具体配置如下： 👉 返回根目录monorepoReact 安装依赖到 react-temp ```bash pnpm add react @types/react react-dom @types/react-dom --filter @norush/react.temp ``` 👉 将react-temp/src/index.js 的index.js 修改成index.tsx，并进行相关配置 ```jsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; ReactDOM.createRoot(document.getElementById('app' ) as Element).render() ``` 到这里子包react-temp 的开发tsc环境以及配置好了。当前的配置结果如下
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3441e812ae644c5aa2e73c6ced65df82~tplv-k3u1fbpfcp-zoom-1.image#?w=1081\&h=613\&s=75866\&e=png\&b=1e1e1e)
到这里子包react-temp 的 Ts 配置算是已经完成了，但为了正常开发我们还需要配置 Webpack 和 babel 。
那接下来看看webpack的基本配置具体是怎么配的。 *** ## 3.9.安装配置Webpack 由于需要使用到babel 进开发文件的解析输出，我们需要结合webpack进行配置。通过webpack将开发过程中需要使用到的各插件关联在一起，这使得项目整体的开发交互逐渐智能化。那么下面来看看Webpack的一些基本功能是如何配置的。 👉 返回根目录将依赖安装到子包react-temp中 ```bash # webpack pnpm add webpack webpack-cli -D --filter @norush/react.temp pnpm add webpack-merge -D --filter @norush/react.temp pnpm add webpack-dev-server -D --filter @norush/react.temp pnpm add html-webpack-plugin -D --filter @norush/react.temp # babel pnpm add @babel/core -D --filter @norush/react.temp pnpm add @babel/preset-react -D --filter @norush/react.temp pnpm add @babel/preset-typescript -D --filter @norush/react.temp pnpm add babel-loader -D --filter @norush/react.temp ``` 👉 在子包react-temp根目录下新建，**public/index.html** 渲染到浏览器的最终HTML文件 ```html Document

``` webpack集成的所以内容最终都将打包到这个模板，然后最终输出到浏览器上渲染。 👉 在子包react-temp根目录下新建，Babel 的配置文件 **.babelrc** 并引入安装的预设插件 ```json { "presets": [ "@babel/preset-react", "@babel/preset-typescript" ] } ``` 要使用到Babel的配置，我们还需要通过webpack配置将他们链接起来。由于开发环境和生产环境的需求不同，为了方便代码的维护和管理，所以需要分别配置不同的文件。具体实现步骤如下先在子包react-temp根目录下新建一个脚本配置文件夹**scripts**，用于管理不同的配置文件。 👉 基础配置 webpack.base.js
它含了 webpack 的基础配置，如**入口**、**输出**、模块**解析**等。这个配置文件是开发环境和生产环境都需要的。 ```javascript const path = require('path'); const HTMLWebpackPlugin = require('html-webpack-plugin'); module.exports = (isDev) => ({ entry: path.join(__dirname, '../src/index.tsx'), mode: isDev ? "development" : "production", output: { filename: 'static/js/[name].[chunkhash:8].js', path: path.join(__dirname, "../dist"), clean: true, //w4 - clean-webpack-plugin publicPath: '/' }, module:{ rules:[ /** * @description ts解析 * @method loader */ { test: /.(ts|tsx)$/, use:{ loader: "babel-loader", } }, ] }, /** * @description resolve|解析配置 */ resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'], alias: { "@": path.join(__dirname, '../src') }, }, /** * @description plugins|插件配置 * @param HTMLWebpackPlugin |根据指定的模板生成HTML文件(含打包后注入的JS) */ plugins: [ new HTMLWebpackPlugin({ template: path.resolve(__dirname, "../public/index.html"), inject: true, }) ] }) ``` 👉 配置 webpack.dev.js
它含了开发环境的配置，如开发服务器、热更新等。这个配置文件主要用于开发环境，方便开发者进行调试和测试。 ```javascript /** * @description development|开发环境 * @param getBaseCfg |使用基础配置 * @param {Object} merge |将多个 webpack 配置文件合并成一个 */ const getBaseCfg = require('./webpack.base'); const { merge } = require('webpack-merge'); const path = require('path'); module.exports = merge(getBaseCfg(true), { devtool: "source-map", devServer: { port: 3000, compress: false, //|压缩 hot: true, //|热更新 historyApiFallback: true,//| 解决404的问题 static: { directory: path.join(__dirname, '../public') } } }) ``` 👉 配置 webpack.prod.js
它包含了生产环境的配置，如代码压缩、文件指纹等。这个配置文件主要用于生产环境，用于优化代码和提高性能。 ```javascript /** * @description productions */ const getBaseCfg = require('./webpack.base'); const { merge } = require('webpack-merge'); const path = require('path'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); // 优化，压缩，分治。 module.exports = merge(getBaseCfg(false), { /** * @description 优化方案配置 * @param minimizer |压缩方案配置 * @param CssMinimizerPlugin |压缩css * @param TerserPlugin |压缩JS * @param splitChunks | (https://webpack.docschina.org/plugins/split-chunks-plugin) */ optimization:{ minimizer: [ new CssMinimizerPlugin(), new TerserPlugin({ parallel: true, // 并行压缩 terserOptions: { compress: { pure_funcs: ["console.log", "console.warn"] }, }, }), ], splitChunks: { // 缓存配置 chunks: 'async', minSize: 20000, minChunks: 1, cacheGroups: { vendors: { priority: 1, test: /node_modules/, name: 'vendors', }, commons: { name: 'commons', minChunks: 3, }, }, }, } }) ``` 👉 将基本配置和开发环境配置弄好后，为了使用终端命令行能运行项目，还需要修改子包(react-temp) **package.json** 的 **scripts** 配置,并移除之前测试用的 **"type": "module"** ```json "scripts": { "start": "webpack-dev-server -c scripts/webpack.dev.js", }, ``` 📝 当前的目录结构如下
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af372709feea497694f1fcbd366f592c~tplv-k3u1fbpfcp-zoom-1.image#?w=1321\&h=766\&s=92757\&e=png\&b=1e1e1e)
💻 配置好脚本后，尝试执行 **npm run start**运行，最终调式结果如下：
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c5c2fc874924b21a8803010d91a07f1~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=1039\&s=73920\&e=png\&b=ffffff)
到这里子包 **react-temp** 的最基本配置已经完成，在该包上可进行react的开发了。但为了更智能还需要更多的配置，列如想要丝滑的写CSS 还需配置 **less、postCssd**等 *** ## 3.10.安装配置PostCss & Less & tailwindcss 为了更丝滑的写CSS，这里使用了原子化的 taullwidcss 来写，当然你也可以使用 less 来写。但不管使用什么方式都需要先配置Css的解析。 * **PostCss :** 它是CSS界的 babel ，专门用于解析各类样式在配置前先梳理一下常见的CSS配置方案： * **CSS in JS :** 在css 中书写类似JS的内容 ,常见的如，**emotion 、styled-component**（代码更灵活，但也更烦杂了） * **CSS module ：** 模块化css，将部分代码抽离共用 * **utility CSS ：** 原子化css ，常见的如 tailwindcss，unoCss 在本例中采用模块化和原子化这两种形式。配置如下 👉 在根目录monorepo中将需要的依赖包安装到子包中 ```bash # CSS pnpm add css-loader -D --filter @norush/react.temp pnpm add style-loader -D --filter @norush/react.temp pnpm add less less-loader -D --filter @norush/react.temp pnpm add mini-css-extract-plugin -D --filter @norush/react.temp pnpm add postcss postcss-loader -D --filter @norush/react.temp pnpm add tailwindcss -D --filter @norush/react.temp pnpm add autoprefixer -D --filter @norush/react.temp // css前缀自定义插件 ``` 👉 在子包react-temp中新建src/index.less, 并配置相关的webpack.base.js ```javascript const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module:{ rules:[ /** * @description css解析 * @method postcss-loader */ { test: /.(css|less)$/, use:[ MiniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'less-loader', 'postcss-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ // [content hash]: 内容变了，才有消除缓存的意义和价值。 filename: 'static/css/[name].[contenthash:8].css' }), ] ``` 👉 在子包根目录新建并配置 **.postcssrc.json** 配置相关引入解析Css需要使用的插件。 * **autoprefixer** 用于自动化添加，不同浏览器的兼容CSS ```JSON { "plugins":{ "autoprefixer": {}, } } ``` 👉 在子包根目录新建并配置 **.browserslistrc**、用于添加兼容浏览器，方便 **autoprefixer** 对不同浏览添兼容的css ```markdown IE 8 chrome 20 ``` 💻 添加兼容配置后CSS 的解析结果如下所示：
![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c20a7b4c0234099bacba5b2909d589f~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=1039\&s=134317\&e=png\&b=fefefe)通过调式图发现，给h1添加的 title样式中的 **transform: scale(1)** 会自动添加一个旧版本的 **-webkit-transform: scale(1)** 做兼容配置。上方webpack.base.js 配置的 CSS 不同解析规则的调式结果：
💻 **'style-loader' ：** 会以 **`