在前端项目开发中，Webpack 是一个非常优秀的集成打包工具。在使用 Webpack 进行打包时，经常会使用到 ExtractTextPlugin 来将 CSS 从 JS 中抽取出来，使得页面能够快速的加载。
但是，有些同学在安装 Webpack 的时候，会遇到 ExtractTextPlugin 相关的问题。接下来，我们将会从以下几个维度来讲解如何解决这些问题：
- ExtractTextPlugin 的安装
- ExtractTextPlugin 的配置
- 解决 ExtractTextPlugin 相关错误
ExtractTextPlugin 的安装
在使用 ExtractTextPlugin 进行 CSS 抽取时，需要在 Webpack 中引入 ExtractTextPlugin 的插件。在安装 ExtractTextPlugin 插件的时候，有两个可选的版本，分别是 ExtractTextPlugin 和 extract-text-webpack-plugin，我们在这里选择较新的 extract-text-webpack-plugin 进行讲解。
通过 yarn 命令安装 extract-text-webpack-plugin：
yarn add extract-text-webpack-plugin -D
ExtractTextPlugin 的配置
在 Webpack 中，我们需要对 ExtractTextPlugin 进行关联和配置。以一个简单的 Webpack 配置文件为例：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
--
-------- -
--- -------------------------------
-
--在上面的配置文件中，我们使用了 ExtractTextPlugin 和 css-loader 插件。在 css 文件中使用了 ExtractTextPlugin 提供的 extract 方法，将 CSS 抽取出来，最后让样式通过新的样式文件引入。
最后，我们将 ExtractTextPlugin 和样式文件在 plugins 中进行关联。
解决 ExtractTextPlugin 相关错误
在使用 ExtractTextPlugin 过程中，如果不按照正确的方式进行配置，或者出现其他的错误，就会在打包中出现相应的错误提示。针对这些错误，我们可以采取以下几种方式进行解决：
找出错误提示信息
在打包过程中，如果出现了 ExtractTextPlugin 相关的错误，Webpack 会在控制台中输出错误提示信息。我们需要通过查看错误信息，找出具体的错误类型和原因。
检查 ExtractTextPlugin 的版本号
在前面提到，ExtractTextPlugin 有两个可选的版本，我们在使用过程中要选择自己需要的版本号。如果出现与版本号相关的错误，需要检查是否选择了正确的版本号。
检查配置项
在 ExtractTextPlugin 的使用中，如果出现了配置项的错误，比如收到错误的文件路径或名称等，就会导致打包中出现错误。解决方式是仔细检查配置项，保证配置项的正确性。
检查插件和依赖项
在使用 ExtractTextPlugin 的过程中，如果没有安装相应的插件或依赖项，就会导致打包失败。需要检查自己是否安装了相应的插件和依赖项。
下面是一个 ExtractTextPlugin 的错误示例代码：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
--
-------- -
--- -------------------
-
--在上面的代码中，我们没有指定样式文件的文件名，这会导致打包失败。这个错误可以通过在 new ExtractTextPlugin() 中指定样式文件名来解决。
结论
从本文中，我们了解了如何解决 Webpack 中 ExtractTextPlugin 相关的错误。在使用中，应该保证正确安装和配置 ExtractTextPlugin 插件，通过错误提示和检查插件和依赖项来解决 ExtractTextPlugin 相关的问题。只有这样，我们才能在使用 Webpack 进行打包时，达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6717a3c6ad1e889fe222ad96