前言
在前端开发中，我们经常需要对网站的样式进行优化或者压缩，同时为了方便调试和维护代码，我们以模块化的方式进行开发。Webpack 是一个常用的前端打包工具，它可以将多个模块打包成一个或多个 JS 文件，从而让我们在开发、调试和上线的过程中更加高效、方便。
在 Webpack 中，我们可以使用模块加载器来处理样式文件，但是这种方式存在一些缺陷，比如无法支持 CSS 的压缩、无法将所有样式文件打包成一个文件等等。因此，我们需要使用一个专门的插件来解决这些问题。本篇文章将会介绍一种名为 @calebmer/extract-text-webpack-plugin 的 Webpack 插件，它可以将样式文件提取到一个独立的 CSS 文件中，从而实现样式文件的优化和压缩。
环境要求
- Node.js 8.0+（建议使用 nvm 进行 Node.js 的管理）
- Webpack 4.0+
安装
@calebmer/extract-text-webpack-plugin 是一个 npm 包，我们可以通过 npm 或者 yarn 进行安装。
$ npm install @calebmer/extract-text-webpack-plugin --save-dev # 或者 $ yarn add @calebmer/extract-text-webpack-plugin --dev
使用方法
在 Webpack 的配置文件中，首先需要引入该插件：
const ExtractTextWebpackPlugin = require('@calebmer/extract-text-webpack-plugin');然后，在 plugin 配置项中加入该插件的实例：
...
plugins: [
new ExtractTextWebpackPlugin({
filename: '[name]-[chunkhash].css', // 提取后的 CSS 文件名
allChunks: true // 是否提取所有 chunk 中的 css
}),
]
...其中，配置项 filename 表示提取后的 CSS 文件名，可以使用占位符进行自定义，占位符包括：
[name]：chunk 名称[chunkhash]：chunk 的 hash 值
配置项 allChunks 表示是否提取所有 chunk 中的 CSS，通常我们会开启这个选项，确保所有的样式都被提取出来。
最后，在加载样式文件的 loader 中，需要将 @calebmer/extract-text-webpack-plugin 的 loader 替换成我们原本的 loader。例如，使用 sass-loader 和 css-loader 处理 SCSS 样式文件的 loader 配置如下：
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
---- ----------------------------------
--------- ---------------
---- -------------- ---------------
---
--
--
--其中，fallback 表示在提取样式文件之前，使用的 loader 配置，通常是 style-loader，表示将 CSS 添加到页面中的 style 标签中。use 表示提取样式文件之后，使用的 loader 配置，通常包括 css-loader 和 sass-loader。
示例代码
下面是一个使用 @calebmer/extract-text-webpack-plugin 插件的完整示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------------ - -------------------------------------------------
-------------- - -
------ -
---- -----------------
--
------- -
----- ----------------------- --------
--------- ------------------------
--
------- -
------ -
-
----- ----------
---- ----------------------------------
--------- ---------------
---- -------------- ---------------
---
--
--
--
-------- -
--- --------------------------
--------- -------------------------
---------- -----
---
--
--总结
@calebmer/extract-text-webpack-plugin 是一个非常实用的 Webpack 插件，它可以将所有样式文件提取到一个独立的 CSS 文件中，从而实现样式文件的优化和压缩。在使用该插件时，需要注意 loader 的顺序，以及提取样式文件的配置项。希望本篇文章能够帮助大家更加深入地了解和掌握该插件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbde6