Webpack加载CSS流程与配置详解

从现在开始，我们要努力学习啦！今天我给大家带来《Webpack中CSS加载流程与配置解析》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

style-loader 负责将 CSS 注入 DOM，css-loader 负责解析 CSS 语法并生成 JS 模块对象；二者顺序不可颠倒，必须 css-loader 在前、style-loader 在后，且生产环境应替换为 MiniCssExtractPlugin.loader。

style-loader 与 css-loader 的职责必须分清

Webpack 本身不理解 .css 文件，必须靠 loader 转换。常见错误是只配了 style-loader 却漏掉 css-loader，结果报错 Module parse failed: Unexpected token —— 这是因为 Webpack 尝试直接解析 CSS 文本，而没经过 css-loader 处理其 @import 和 url() 等语法。

css-loader 负责解析 CSS 文件内容、处理路径引用、启用模块化（modules: true）、生成 JS 可消费的样式对象；style-loader 则负责把该对象插入到 DOM 的