在现代 Web 开发中，使用 CSS 预处理器或者 CSS 模块化已经成为了一个主流的趋势。这种方式可以使得我们的 CSS 更加可维护、灵活、可重用，同时也可以提高代码的可读性。但是，在使用这些工具时，由于它们需要编译成 CSS 文件才能被浏览器所理解，会使得我们的 Web 应用的打包变得更加复杂。而 Webpack 则成为了解决这一问题的利器。
Webpack 是一个非常强大的前端构建工具，它可以将你的 JavaScript、CSS、图片、字体和其他资源打包成静态文件，并且可以通过插件和 loaders 对它们进行处理。但是，Webpack 默认只支持将 JavaScript 文件打包成一个或多个文件，而对于 CSS 文件，我们需要使用 ExtractTextWebpackPlugin。
安装和配置
首先，我们需要安装 extract-text-webpack-plugin 和 css-loader。其中，css-loader 是 Webpack 自带的一个 loader，用于处理 CSS 文件，而 extract-text-webpack-plugin 插件则可以将处理过的 CSS 提取到一个独立的文件中。
npm install --save-dev extract-text-webpack-plugin css-loader
在 Webpack 的配置文件中，我们需要添加如下代码：
-- -------------------- ---- ------- ----- ----------------- - --------------------------------------- -------------- - - -- --- ------- - ------ - - ----- --------- ---- --------------------------- ---- ------------ -- - - -- -------- - --- ------------------------------- - -展开代码
以上代码中，我们使用 ExtractTextPlugin.extract 方法将 css-loader 应用到 CSS 文件上，然后将提取出来的 CSS 文件输出到 styles.css 文件中。这意味着在我们使用 Webpack 打包时，所有的 CSS 文件都会被提取到一个独立的 CSS 文件中，而不是被打包进 JavaScript 文件。这样，我们可以更加方便地修改和维护我们的 CSS。
示例代码
下面是一个简单的示例，用于说明如何使用 ExtractTextWebpackPlugin 和 CSS 模块化：
index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- --------------- ----- ---------------- -------------------- ------- ------ ---- -------------------- ------------ ------- -------展开代码
styles.css
/* 使用 CSS 模块化来定义 .title 类 */ .title { color: red; }
main.js
/* 在 JavaScript 中引入 CSS 文件 */ import './styles.css';
webpack.config.js
-- -------------------- ---- ------- ----- ----------------- - --------------------------------------- -------------- - - ------ ------------ ------- - ----- ---------- --------- ----------- -- ------- - ------ - - ----- --------- ---- --------------------------- ---- -------------------- -- - - -- -------- - --- ------------------------------- - -展开代码
通过以上配置，我们在打包时会先将 styles.css 文件中的类名进行处理，以便于它们可以在 JavaScript 中被正确引用。同时，我们在 HTML 文件中直接引入了 styles.css 文件，而不是通过 JavaScript，这样就可以让 HTML 和 CSS 变得更加独立和易于维护。
结语
在现代 Web 开发中，使用 CSS 预处理器或者 CSS 模块化已经成为了一种趋势。而 Webpack 则为我们提供了 ExtractTextWebpackPlugin 插件，使得我们可以更加方便和灵活地管理 CSS 文件，并提高我们的 Web 应用的性能和可维护性。
在使用 ExtractTextWebpackPlugin 时，我们需要记住几个要点：
- 需要安装和配置
extract-text-webpack-plugin和css-loader。 - 使用
ExtractTextPlugin.extract方法将css-loader应用到 CSS 文件上。 - 将提取出的 CSS 文件输出到一个独立的文件中。
希望这篇文章能够对您了解 ExtractTextWebpackPlugin 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2c986314edc2684c521a0
