在前端开发中，CSS 是网页中不可或缺的样式语言，而 webpack 又是前端开发中非常重要的模块打包工具。webpack 提供了一系列的插件和 loader，使我们能够更加便捷地处理样式文件。在这篇文章中，我们将深入了解 webpack 如何将 CSS 源码处理为可在浏览器上运行的样式代码，并将介绍一些进阶的技巧。
1. 安装与配置
在开始讲解之前，我们先来安装和配置 webpack。可以通过以下命令进行安装：
npm install webpack webpack-cli --save-dev
接着，我们需要在项目中创建一个 webpack 配置文件 webpack.config.js：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- - --展开代码
这个配置文件指定了 webpack 的入口文件和打包后的输出文件路径。接下来，我们需要集成 CSS 处理能力，使 webpack 能够正确处理 CSS 文件。
2. 基础配置
在 webpack 中，使用 CSS 是需要借助 loader 的，我们需要安装两个 loader：style-loader 和 css-loader。使用以下命令进行安装：
npm install style-loader css-loader --save-dev
接着，我们需要在 webpack.config.js 中配置这两个 loader，使 webpack 能够正确加载 CSS 文件：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- ---------- ---- ---------------- -------------- -- -- -- --展开代码
在这里，我们使用了正则表达式 test: /\.css$/i 来匹配所有以 .css 结尾的文件，然后使用 use 属性指定了两个 loader：style-loader 和 css-loader。这两个 loader 的作用分别如下：
css-loader：用于解析 CSS 文件，并将其转换为 JS 模块。style-loader：将解析得到的 CSS 模块添加到 DOM 中。
最后，我们只需要在 JS 文件中引入 CSS 文件即可：
import './style.css';
这一基础配置完成后，我们已经能够使用 webpack 处理 CSS 文件了。
3. 进阶配置
除了基础配置之外，webpack 还提供了许多进阶的配置选项，使我们能够更加灵活地完成 CSS 处理。下面，我们将介绍一些常用的进阶配置。
3.1 使用 postcss-loader 自动添加浏览器前缀
浏览器厂商对于一些 CSS 属性的支持并不一致，因此我们需要使用浏览器前缀来兼容不同的浏览器。postcss-loader 可以帮助我们自动添加浏览器前缀。使用以下命令进行安装：
npm install postcss-loader autoprefixer --save-dev
接着，我们需要在 webpack.config.js 中配置 postcss-loader：
-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- ---------- ---- ---------------- ------------- ------------------ -- -- -- --展开代码
在这里，我们只需要在 use 属性中添加 'postcss-loader' 即可。然后，我们需要创建一个 postcss.config.js 文件，用于配置 postcss-loader：
module.exports = { plugins: [ require('autoprefixer') ] };
在这个配置文件中，我们使用了 autoprefixer 插件来自动添加浏览器前缀。
3.2 将 CSS 提取为独立的文件
在默认情况下，使用 style-loader 会将 CSS 样式以 <style> 标签的形式插入到 HTML 页面中，如果我们希望将 CSS 样式提取为独立的文件，可以使用 mini-css-extract-plugin 插件。使用以下命令进行安装：
npm install mini-css-extract-plugin --save-dev
接着，我们需要在 webpack.config.js 中配置 mini-css-extract-plugin：
-- -------------------- ---- ------- ----- -------------------- - ----------------------------------- -------------- - - -- --- ------- - ------ - - ----- ---------- ---- - - ------- --------------------------- -- ------------- ---------------- -- -- -- -- -------- - --- ---------------------- --------- ----------- --- -- --展开代码
在这里，我们首先需要引入 MiniCssExtractPlugin。然后，在 use 属性中，我们需要使用 MiniCssExtractPlugin.loader 来替代 style-loader，如：
{ loader: MiniCssExtractPlugin.loader }
最后，我们需要在 plugins 中添加 MiniCssExtractPlugin，并指定输出的 CSS 文件名为 'style.css'。这样，webpack 打包后会将 CSS 样式提取为一个独立的文件。
3.3 压缩 CSS 文件
CSS 文件可以通过各种方式进行压缩，从而减少文件大小，提高网页的加载速度。optimize-css-assets-webpack-plugin 可以帮助我们压缩 CSS 文件。使用以下命令进行安装：
npm install optimize-css-assets-webpack-plugin --save-dev
然后，在 webpack.config.js 中添加以下代码：
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { // ... plugins: [ new OptimizeCssAssetsPlugin(), ], };
这样，webpack 打包时就会对 CSS 文件进行压缩了。
4. 示例代码
为了更好地理解，我们以下面这段 HTML 代码和 CSS 代码为例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- ---------------- ------- ------ ---- ------------ ---------- ------------- ---------- -- ------------ ------ ------- -------展开代码
/* style.css */ .box { background-color: #f1f1f1; padding: 20px; border-radius: 5px; }
然后，我们将 CSS 文件引入到 JS 文件中：
// index.js import './style.css';
最后，在 webpack.config.js 中配置以下代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------------------- - ----------------------------------- ----- ----------------------- - ---------------------------------------------- ----- ------------ - ------------------------ -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- ------- - ------ - - ----- ---------- ---- - - ------- --------------------------- -- ------------- - ------- ----------------- -------- - --------------- - -------- - -------------- - - -- -- -- -- -- -- -------- - --- ---------------------- --------- ----------- --- --- -------------------------- -- --展开代码
这样，在运行 npm run build 命令后，webpack 就可以正确地处理 CSS 文件，并将其提取为一个独立的文件，并且文件经过压缩处理，大小大大减少。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c401c570d6986a67233ff3
