Webpack-第 12 篇：Webpack 5 中的 CSS 处理与优化

Webpack-第 12 篇：Webpack 5 中的 CSS 处理与优化

一、CSS 模块化与作用域

（一）CSS 模块化概念

CSS 模块化是指将 CSS 样式封装在特定的模块中，避免全局样式的冲突。在大型项目中，不同组件的样式可能会相互影响，使用 CSS 模块化可以确保每个组件的样式只作用于该组件。

（二）在 Webpack 中实现 CSS 模块化

在 Webpack 中，可以通过 css-loader 的 modules 选项来开启 CSS 模块化。

1. 安装依赖

npm install css-loader style-loader --save-dev

2. 配置 Webpack

在 webpack.config.js 中添加如下配置：