On this page
Webpack处理内联CSS/SASS/图片资源
如何配置Webpack以支持内联CSS/SASS样式和图片资源？请提供具体的Loader配置示例并解释其作用。
考察点分析
本题主要考察以下核心能力维度：
- Webpack配置能力：对Webpack核心配置结构的理解，特别是module.rules的配置方法
- Loader使用技巧：对CSS预处理器、样式注入和资源处理Loader的搭配使用
- 现代构建工具演进：Webpack 5+的Asset Modules与旧版Loader方案的差异理解
具体技术评估点：
- 多Loader协同工作的顺序与配置方式
- SASS编译链路的完整配置（sass-loader -> css-loader -> style-loader）
- 资源内联（Data URLs）与文件输出的平衡策略
- Webpack 5+ Asset Modules与旧版Loader方案的区别
- 生产环境优化意识（代码分割、缓存策略等）
技术解析
关键知识点
- SASS处理链：sass-loader > css-loader > style-loader
- 资源模块类型：asset/resource vs asset/inline vs asset
- Loader执行顺序：从后往前执行（右到左）
原理剖析
Webpack通过Loader管道处理模块资源。对于SCSS文件：
- sass-loader将SCSS编译为标准CSS
- css-loader解析@import和url()语句
- style-loader将CSS注入DOM的