2026年Webpack构建流程优化与Webpack配置管理专项训练卷

2026年Webpack构建流程优化与Webpack配置管理专项训练卷考试时间：______分钟总分：______分姓名：______一、单项选择题（请选择最符合题意的选项）1.在Webpack中，以下哪个选项是用于控制是否进行TreeShaking的关键配置项？A.`optimization.runtimeChunk`B.`optimization.splitChunks`C.`optimization.usedExports`D.`optimization.moduleIds`2.当需要将一个大型库（如Vue）按需分割成多个包，以减少初始加载时间时，以下哪种Webpack配置策略最为合适？A.使用`externals`将该库标记为外部依赖B.在`optimization.splitChunks`中设置`chunks:'all'`C.使用`optimization.runtimeChunk:'single'`并配合`name:'[name]'`D.将该库的所有代码放在一个入口文件中，不进行分割3.在Webpack配置管理中，如果你希望在不同环境（开发、生产）下使用不同的API接口地址，最推荐的做法是？A.手动修改入口文件中的API路径B.使用`webpack-merge`为每个环境创建一个完整的配置文件C.使用`DefinePlugin`定义环境变量，并在代码中通过`process.env`访问D.使用`resolve.alias`来映射API路径4.对于一个包含大量静态资源（图片、字体）的Webpack项目，为了优化加载速度和缓存，以下哪种处理方式通常效果最好？A.对所有静态资源使用`file-loader`B.对所有静态资源使用`url-loader`，并设置合适的`limit`和`name`选项C.对小尺寸资源使用`url-loader`，大尺寸资源使用`file-loader`D.对所有静态资源使用`asset/resource`（Webpack5+）5.如果你的Webpack项目需要支持SSR（服务器端渲染），在配置上最需要关注和调整的部分是？A.`module.rules`的Loader配置B.`resolve.alias`的配置C.`optimization.runtimeChunk`的配置D.`output.libraryTarget`和`optimization.sourcemap`的配置6.在Webpack配置中，`resolve.alias`的主要作用是？A.为模块路径提供简短别名，提高开发时导入的便捷性B.控制代码分割的块（chunk）的名称C.定义外部库的引用方式D.为Loader指定查找路径7.当Webpack构建速度变慢，怀疑是文件系统I/O操作导致时，可以考虑使用以下哪个插件来利用多线程进行文件读取？A.`thread-loader`B.`happy-pack`C.`webpack-parallel`D.`cache-loader`8.以下哪个Webpack配置选项是用于控制最终打包文件名称和路径的？A.`module.noParse`B.`resolve.extensions`C.`output`D.`optimization.noEmitOnErrors`9.在使用`webpack-merge`进行多环境配置时，如果你希望子配置中的规则能够覆盖父配置中的同名规则，应该如何设置`merge`选项？A.使用`merge:{mergeStrategy:{}}`B.使用`merge:{mergeStrategy:{'*':{rules:'replace'}}}`C.使用`merge:{mergeStrategy:{'*':{rules:'append'}}}`D.`webpack-merge`本身不支持规则覆盖，需要手动处理10.对于需要处理大量ES6+语法并需要类型检查的项目，以下哪种Webpack配置组合是比较常见的？A.`babel-loader`+`ts-loader`B.`babel-loader`+`swc-loader`C.`ts-loader`+`babel-loader`D.`webpack-swc-loader`+`dts-webpack-plugin`二、多项选择题（请选择所有符合题意的选项）1.以下哪些技术或配置项可以帮助减少Webpack最终打包出的JavaScript包体积？A.TreeShakingB.CodeSplittingC.使用`MiniCssExtractPlugin`提取CSSD.代码压缩（如使用`TerserPlugin`）E.`optimization.splitChunks`的`maxInitialRequests`和`maxAsyncRequests`设置2.Webpack的`resolve`配置对象中，以下哪些属性是常用的？A.`modules`B.`extensions`C.`alias`D.`resolveLoader`E.`fallback`3.使用`optimization.splitChunks`可以实现哪些功能？A.将共用的第三方库代码提取到单独的chunk中B.将业务代码按异步入口分割成不同的chunkC.为每个第三方库生成独立的chunkD.优化CSS加载E.减少初始加载的JS体积4.在Webpack配置管理中，处理多入口项目时可能遇到的问题包括？A.多个入口文件可能导致最终的bundle数量过多B.需要为每个入口配置不同的输出路径或名称C.确保不同入口间的依赖正确处理D.可能导致`optimization.runtimeChunk`配置变得复杂E.会显著增加Webpack构建时间5.Webpack的Loader通常具有以下哪些特点？A.可以处理JavaScript文件以外的文件类型B.可以将一种文件内容转换为另一种文件内容C.执行顺序是从上到下，从右到左D.本质上是一个函数E.可以被配置为异步执行以提升构建速度6.以下哪些是Webpack的内置Plugin？A.`HtmlWebpackPlugin`B.`MiniCssExtractPlugin`C.`TerserPlugin`D.`DefinePlugin`E.`CleanWebpackPlugin`7.为了提升Webpack的构建速度，可以采取的措施包括？A.使用`cache-loader`或`hard-source-webpack-plugin`进行缓存B.关闭`webpack`的`watch`模式C.使用`thread-loader`或`happy-pack`进行任务并行化D.使用`optimization.splitChunks`的`chunks:'all'`进行全局代码分割E.减少不必要的`module.rules`数量8.Webpack的`output`配置对象中，以下哪些属性是常用的？A.`filename`B.`path`C.`publicPath`D.`library`E.`chunkFilename`9.当配置Webpack处理CSS时，以下哪些Loader或Plugin是常见的组合？A.`style-loader`B.`css-loader`C.`postcss-loader`D.`MiniCssExtractPlugin`E.`sass-loader`(用于Sass预处理)10.Webpack的`mode`配置项（如`development`、`production`）会影响哪些方面？A.优化级别（如代码压缩程度）B.是否生成SourceMapC.是否启用某些性能优化特性（如TreeShaking）D.Loader和Plugin的默认行为E.详细的构建日志输出三、填空题1.在Webpack中，用于将非JavaScript模块（如CSS、图片）转换为JavaScript模块进行处理的机制称为________。2.如果你的Webpack项目使用了大量的动态导入（`import()`），为了优化这些动态导入模块的加载，可以在`optimization.splitChunks`中设置________选项。3.在处理CSS文件时，`css-loader`负责解析CSS中的________，并将其转换为JavaScript模块，而`style-loader`则负责将这个JavaScript模块插入到DOM中的________标签里。4.当Webpack配置文件本身需要被Webpack重新加载时，可以使用________插件。5.为了在开发环境中快速重建项目，同时又能获得较快的构建速度，通常会使用Webpack的________模式，并结合相应的Loader（如`babel-loader`的`cache`选项）。6.在Webpack中，`externals`配置用于指定某些依赖库不通过Webpack打包，而是在运行时从________中加载。7.对于TypeScript项目，Webpack通常会使用________Loader来处理`.ts`或`.tsx`文件，该Loader会将其转换为JavaScript，并处理其中的类型定义文件（`.d.ts`）。8.`webpack-dev-server`插件默认使用的Webpack配置文件名是________。9.如果Webpack构建过程中出现“Modulenotfound”错误，除了检查`resolve.modules`和`resolve.alias`外，还应检查________配置。10.在Webpack配置管理中，为了实现不同环境（开发、生产）下的配置复用和差异化，最常用的工具之一是________。四、简答题1.请简述CodeSplitting（代码分割）的概念及其在Webpack中的主要实现方式。2.请说明`webpack-merge`插件的主要作用，并解释它在多环境Webpack配置管理中的优势。3.当使用Webpack打包一个包含大量CSS和少量JavaScript的应用时，如果最终构建的JS包体积过大，可能的原因有哪些？请列举至少三点，并简述相应的优化思路。4.解释Webpack的`externals`配置的作用和用法，并说明使用它的优缺点。5.在Webpack项目中，如何配置才能有效地支持TreeShaking？需要考虑哪些配置项？五、实践题1.假设你需要为一个使用React和Sass的大型项目配置Webpack。请简述你需要配置的关键Loader（至少包括处理ReactJSX和Sass的Loader），并说明它们大致的处理流程和顺序。2.描述一下你将如何为该项目的开发环境和生产环境配置Webpack。请至少提及你会如何设置`mode`、`output`、`optimization`以及`resolve.alias`等关键配置项的差异。试卷答案一、单项选择题1.C解析思路：`optimization.usedExports`是Webpack5引入的配置项，明确告知Webpack哪些模块的导出在最终构建中被使用，从而使得TreeShaking能够更精准地移除未使用的代码。2.B解析思路：将大型库按需分割通常意味着将其内部的部分功能模块化，通过异步加载（如动态`import()`）来实现。`optimization.splitChunks`的`chunks:'all'`选项可以查找所有模块中的异步chunks，并将属于同一个库的代码合并在一起打包，符合按需分割的需求。3.C解析思路：使用`DefinePlugin`可以在编译时期将环境变量注入到代码中，这些变量可以在代码中通过`process.env`访问。这种方式不修改源代码，不增加打包体积，且在构建时可以方便地切换不同环境的值，是最符合Webpack配置习惯的做法。4.C解析思路：`url-loader`可以将小于指定大小（`limit`）的文件转换为Base64URIs，减少HTTP请求次数。对于大于该大小的文件，则使用`file-loader`将其打包到输出目录。这种方式能有效处理小图片、小字体等资源，优化加载速度并利用浏览器缓存。5.D解析思路：SSR需要Webpack能够将应用代码分割成服务器渲染部分和客户端运行部分，并可能需要特殊的运行时代码和SourceMap支持。`output.libraryTarget`决定了库的导出方式（如CommonJS,UMD），`optimization.sourcemap`（或`devtool`配置）对于调试SSR生成的代码至关重要。6.A解析思路：`resolve.alias`主要用于为特定的路径提供一个简短的别名，使得在导入模块时可以更方便地使用别名而不是完整的相对或绝对路径，提高开发效率。7.A解析思路：`thread-loader`可以将耗时的Loader任务（如文件读取、CSS解析）放到一个单独的WebWorker线程中执行，避免阻塞主线程，从而提升Webpack的构建速度。8.C解析思路：`output`对象是Webpack配置中用于指定输出文件路径、名称、库信息等的关键部分，直接控制着最终打包结果在磁盘上的样子。9.B解析思路：在使用`webpack-merge`时，如果希望子配置项能够覆盖父配置项中同名的规则（特别是`rules`数组），通常需要在`merge`的`strategy`选项中针对`'*'`（代表所有配置项）及其下的`rules`设置`'replace'`策略。10.C解析思路：TypeScript项目需要将TypeScript代码转换为JavaScript，并处理类型定义。`ts-loader`负责前者，它会调用`typescript`编译器。`babel-loader`则用于处理JavaScript代码中剩余的ES6+语法和兼容性转换。通常`ts-loader`会先执行，然后`babel-loader`（如果需要）再执行。二、多项选择题1.A,B,D,E解析思路：TreeShaking（A）移除未引用代码；CodeSplitting（B）减少初始加载体积；代码压缩（D）直接减小文件大小；`splitChunks`的配置（E）可以优化打包结构和体积。`MiniCssExtractPlugin`（C）主要减少JS包体积，但对JS包本身的代码量削减作用不大。2.A,B,C,E解析思路：`modules`指定Webpack搜索模块的目录；`extensions`指定解析文件时可以省略的文件扩展名；`alias`提供路径别名；`fallback`用于指定当`node_modules`中找不到模块时，回退到哪些原生模块（Webpack5新特性）。`resolveLoader`（D）用于指定Loader的搜索路径。`resolve.modules`（A）是旧版配置，现在通常包含在`resolve`对象内。3.A,B,E解析思路：`splitChunks`可以提取共用的第三方库到共享chunk（A）；可以将异步入口的模块分割成单独chunk（B）；通过配置可以优化chunk结构以减少初始加载体积（E）。提取第三方库可能只是`splitChunks`功能的一部分，不一定每个库都单独提取（C）；优化CSS加载主要是ExtractPlugin和CSS相关loader的工作（D）。4.A,B,C,D解析思路：多入口意味着可能产生多个入口chunk，增加最终bundle数量（A）；需要为不同入口配置不同的输出路径或名称以区分（B）；需要确保模块依赖关系正确处理，避免遗漏（C）；配置`splitChunks`等优化策略时会更复杂（D）。虽然可能增加构建时间，但不一定是“显著”增加（E）。5.A,B,C,D,E解析思路：Loader处理非JS文件（A），转换文件内容（B），执行顺序固定（C），本质是函数（D），可以通过`thread-loader`（E）并行执行以加速。6.D,E解析思路：`DefinePlugin`（D）是内置Plugin，用于定义全局常量。`CleanWebpackPlugin`（E）也是官方维护的内置Plugin之一（随Webpack核心发布或通过`@webpack-contrib/clean-webpack-plugin`）。`HtmlWebpackPlugin`（A）、`MiniCssExtractPlugin`（B）、`TerserPlugin`（C）虽然非常常用，但属于第三方Plugin。7.A,C,E解析思路：`cache-loader`/`hard-source-webpack-plugin`通过缓存编译结果来加速重建（A）。关闭`watch`模式可以避免文件监听带来的性能开销，但会失去热更新功能（B，是否提升速度取决于项目）。`thread-loader`/`happy-pack`利用多核CPU并行化任务（C）。`splitChunks`优化打包结构，可能间接提升加载速度，但主要目的是减少体积（D）。减少不必要的`module.rules`可以减少Webpack解析配置的时间（E）。8.A,B,C,E解析思路：`filename`（A）控制输出文件的名称；`path`（B）控制输出文件的目录；`publicPath`（C）用于在输出文件中添加公共路径前缀，方便在浏览器中访问；`chunkFilename`（E）专门控制非入口chunk的文件名称。`library`（D）是用于配置库模式的属性。9.A,B,C,D,E解析思路：处理CSS流程通常涉及：`style-loader`（A）将CSS规则注入`<style>`标签；`css-loader`（B）解析CSS文件，处理`@import`和`url()`；`postcss-loader`（C）处理CSS中的预处理器（如Sass,Less）或PostCSS插件；`MiniCssExtractPlugin`（D）在生产环境将CSS提取到单独文件；`sass-loader`（E）是处理Sass/SCSS的Loader，它内部会调用Sass编译器并使用`css-loader`和`postcss-loader`（如果配置了）。顺序通常是`loader1->loader2->...->style-loader`。10.A,B,C,E解析思路：`development`模式下，优化级别较低，`sourceMap`为`eval`（B），有助于调试；`splitChunks`等优化可能未开启或级别较低（A）。`production`模式下，优化级别最高，开启TreeShaking、代码压缩（A），`sourceMap`为`hidden-source-map`或`none`（B）。`production`模式会启用更多内置性能优化（C）。`mode`会影响许多Loader/Plugin的默认行为（如`TerserPlugin`的压缩程度，`MiniCssExtractPlugin`的开启与否）（E）。`mode`主要影响优化和日志，不会改变Loader的执行顺序（D）。三、填空题1.模块化（或ModuleFederation/模块转换）解析思路：Webpack通过Loader将非JavaScript文件（如CSS中的URL引用、图片文件）转换成JavaScript模块，使得Webpack能够理解和管理这些资源，如同管理普通JavaScript模块一样。2.cacheGroups.runtime(或cacheGroups.default)解析思路：`optimization.splitChunks`中的`cacheGroups.runtime`（或其默认配置）专门用于处理运行时代码（如Webpack自己生成的代码、`externals`指定的库的运行时依赖）。对于使用动态导入的场景，这部分运行时代码是需要被用户代码依赖加载的，因此将其单独分割并缓存，可以使得后续更新用户代码时，只要运行时代码没变，就可以复用旧的缓存，优化冷启动速度。3.@import语句/url()函数引用/依赖（三选二或全选）style标签解析思路：`css-loader`的核心功能是解析CSS文件，识别其中的`@import`语句和`url()`函数引用，并将它们转换为JavaScript模块的依赖关系。`style-loader`的作用是将这个由`css-loader`处理后的JavaScript模块（包含了最终需要插入到页面中的CSS规则字符串）插入到DOM中的`<style>`标签里。4.HotModuleReplacementPlugin(或HMRPlugin)解析思路：`HotModuleReplacementPlugin`（简称`HMRPlugin`）是Webpack的核心插件之一，它使得在开发过程中修改源代码后，无需重新编译整个应用，就能热更新（即时看到修改效果）相关模块，极大提升开发效率。5.development(或dev)解析思路：Webpack提供了`development`和`production`两种模式。`development`模式专注于快速重建和调试，优化级别低，构建速度快。配合`cache-loader`、`thread-loader`等以及Loader自身的缓存机制（如`babel-loader`的`cache`），可以在开发环境中实现较快的重建速度。6.浏览器（或Node.js环境/运行时环境）解析思路：`externals`配置告诉Webpack不要将指定的模块打包到bundle中，而是在运行时（浏览器或Node.js环境）由外部模块系统（如浏览器原生加载器、npm脚本等）去加载这些模块。7.ts-loader解析思路：处理TypeScript文件到JavaScript的核心Loader是`ts-loader`。它内部执行`typescript`编译器将`.ts`文件转换为`.js`文件，并处理`.d.ts`类型定义文件。8.webpack.config.js解析思路：`webpack-dev-server`在启动时默认寻找名为`webpack.config.js`的Webpack配置文件来执行构建。9.resolve.modules(或resolve.alias)解析思路：当出现“Modulenotfound”错误时，Webpack首先会检查`resolve.modules`数组中指定的目录列表是否包含目标模块。其次会检查`resolve.alias`中定义的别名是否正确。这两个配置是影响Webpack查找模块路径的最主要因素。10.webpack-merge解析思路：`webpack-merge`是官方推荐的用于合并Webpack配置的插件。通过它，可以将基础配置和特定环境的配置（如开发环境、生产环境）进行合并，实现配置的模块化和复用，同时又能方便地进行差异化设置。四、简答题1.请简述CodeSplitting（代码分割）的概念及其在Webpack中的主要实现方式。解析思路：概念：CodeSplitting是指将一个大的JavaScript应用拆分成多个较小的代码块（chunks），按需加载这些代码块，以减少初始加载时间，优化性能。实现方式：主要依靠Webpack的`optimization.splitChunks`配置。可以通过设置`chunks`选项（如`'all'`,`'async'`,`'initial'`）来控制分割的范围；通过`name`选项自定义输出文件名称；通过`cacheGroups`对象精细控制各个chunk的分割逻辑（如默认chunk、异步chunk、第三方库chunk等）。2.请说明`webpack-merge`插件的主要作用，并解释它在多环境Webpack配置管理中的优势。解析思路：主要作用：`webpack-merge`的主要作用是将两个或多个Webpack配置对象进行合并，通常是将包含共同基础配置的父配置与包含环境特定配置的子配置进行合并。解释优势：在多环境配置管理中，优势在于可以维护一个基础配置文件（包含通用的Loader、Plugin、resolve等），然后为每个环境创建一个子配置文件，只包含该环境特有的配置（如`mode`、`devtool`、`optimization`、`output`、特定环境的插件等）。使用`webpack-merge`将子配置与基础配置合并时，子配置中的同名项会覆盖基础配置中的同名项，实现了配置的复用和差异化管理的精简。3.当使用Webpack打包一个包含大量CSS和少量JavaScript的应用时，如果最终构建的JS包体积过大，可能的原因有哪些？请列举至少三点，并简述相应的优化思路。解析思路：可能原因：1.第三方库体积过大：项目依赖了大量第三方JS库（如UI框架、轮子库），且Webpack没有进行有效的代码分割或TreeShaking，导致这些库的代码被打包进了主JS文件。优化思路：使用`optimization.splitChunks`提取第三方库到单独的chunk；利用`externals`将不常变动的库排除Webpack打包；检查是否有多余的库。2.代码冗余：项目中存在大量重复的JS代码，或者JS代码中包含了大量的未使用代码（死代码），但Webpack的TreeShaking配置不当或无效（如使用了不支持的模块语法）。优化思路：重构代码减少冗余；确保TreeShaking配置正确（如使用支持的模块语法）；检查第三方库是否提供了更精简的版本。3.未能有效利用代码分割：虽然项目可能包含多个入口或使用了动态导入，但Webpack的`splitChunks`配置不当，导致所有代码都打包到一个或少数几个过大的chunk中。优化思路：合理配置`optimization.splitChunks`，特别是`chunks:'all'`或针对异步入口的配置；确保动态导入（`import()`）被正确利用。4.解释Webpack的`externals`配置的作用和用法，并说明使用它的优缺点。解析思路：作用：`externals`配置用于指定一组模块，Webpack在打包时会忽略这些模块，不将其包含在bundle中，而是在运行时由外部加载器（通常是浏览器原生JS加载器或Node.js环境）来加载它们。用法：在Webpack配置对象的`externals`属性中，可以指定一个对象，键是模块名，值是该模块在运行时的全局变量名（通常在浏览器中）。例如：`externals:{'vue':'Vue','lodash':'_';}`表示Webpack不会打包`vue`和`lodash`库，而是在运行时通过全局变量`Vue`和`_`来访问它们。也可以指定一个函数，返回运行时全局变量名。优缺点：优点：1.减小Webpack打包体积，尤其是对于体积大且不常变动的第三方库；2.可能提升构建速度，因为Webpack无需处理这些模块；3.减少运行时的依赖项。缺点：1.运行时依赖管理复杂化，需要确保外部模块在运行时可用且版本正确；2.不利于代码分割，这些模块的代码无法被Webpack的`splitChunks`等机制管理；3.调试时可能遇到困难，因为错误信息可能指向外部模块而非Webpackbundle内部。5.在Webpack项目中，如何配置才能有效地支持TreeShaking？需要考虑哪些配置项？解析思路：有效支持TreeShaking需要满足几个条件：1.使用ES6模块语法（`import`/`export`）：Webpack的TreeShaking主要基于ES6模块语法进行静态分析，使用CommonJS（`require`/`module.exports`）语法无法有效进行TreeShaking。2.确保所有依赖都能被正确导入：对于需要TreeShaking移除的代码，必须通过ES6模块导入语句显式地导入它们。3.使用支持的模块格式：确保所有依赖的模块格式（如`.js`,`.jsx`,`.ts`,`.tsx`,`.mjs`等）被Webpack的Loader正确处理。4.避免使用CommonJS的`module.exports`：如果模块同时导出ES6模块和CommonJS模块，Webpack可能无法正确识别哪些导出是真正被使用的。配置项：1.`mode:'production'`：虽然不是必须，但`production`模式下Webpack会默认启用更高级别的优化，包括TreeShaking。2.`optimization.usedExports`:明确告知Webpack哪些模块的导出被使用，可以增强TreeShaking的精准度。3.`optimization.splitChunks`:合理配置可以辅助TreeShaking，例如将未使用的代码放入`chunks:'async'`的chunk中。4.确保使用能够进行TreeShaking的Loader：如`babel-loader`（配合`@babel/plugin-syntax-dynamic-import`和`@babel/plugin-transform-modules-commonjs`）、`ts-loader`等。5.避免使用`optimization.noEmitOnErrors`：它会阻止生成输出文件，使得TreeShaking的结果无法体现。五、实践题1.假设你需要为一个使用React和Sass的项目配置Webpack。请简述你需要配置的关键Loader（至少包括处理ReactJSX和Sass的Loader），并说明它们大致的处理流程和顺序。解析思路：关键Loader及其处理流程顺序：*`babel-loader`：用于将ES6+语法（包括动态`import()`等React特性）转换为ES5语法。通常需要配合`@babel/core`、`@babel/preset-env`、`@babel/preset-react`等插件。处理流程：接收`.js`或`.jsx`文件，通过`@babel/core`转换代码，输出ES5代码。*`ts-loader`（如果使用TypeScript）：用于将TypeScript代码转换为JavaScript。通常需要配合`typescript`库。处理流程：接收`.ts`或`.tsx`文件，通过`typescript`编译器转换代码，输出JavaScript代码，并将`.d.ts`文件用于类型检查。*`css-loader`：用于解析CSS文件，处理其中的`@import`和`url()`，将它们转换为JavaScript模块依赖。处理流程：接收CSS文件，解析内容，返回JavaScript模块。*`sass-loader`（或`less-loader`）：用于将Sass/SCSS预处理器语言转换为CSS。通常需要配合`sass`或`less`库。处理流程：接收`.scss`或`.sass`文件，通过`sass`/`less`引擎转换代码，输出CSS代码。*`postcss-loader`：用于处理CSS中的PostCSS插件，如自动添加浏览器前缀、压缩CSS等。处理流程：接收由`sass-loader`或`css-loader`输出的CSS代码，通过`postcss`库和配置的插件进行处理，输出最终CSS代码。*`style-loader`：用于将CSSJavaScript模块插入到DOM中的`<style>`标签里。处理流程：接收由`css-loader`、`sass-loader`、`postcss-loader`等输出的JavaScript模块（包含CSS字符串），将其内容注入`<style>`标签。*`react-refresh/babel`或`react-refresh/ts-loader`（用于HMR）：用于React热模块替换。处理流程：在开发环境中，配合`babel-loader`或`ts-loader`，将JSX代码转换为包含热更新逻辑的代码。大致的处理顺序（以`.jsx`文件为例）：`babel-loader`（处理JSX和ES6+）->`react-refresh/babel`（可选，用于HMR）->（如果使用TypeScript）`ts-load