引言
在前端开发中，CSS 是必不可少的一部分。随着项目变得越来越大，CSS 文件也会变得越来越庞大，这会导致页面加载缓慢，影响用户体验。为了减少加载时间，我们通常会考虑将 CSS 文件进行分离。在 Webpack 中，我们可以使用 extract-text-webpack-plugin 插件来完成这个过程。
安装
在使用 extract-text-webpack-plugin 插件之前，我们需要先安装它。在终端中执行以下命令：
npm install extract-text-webpack-plugin --save-dev
使用
使用 extract-text-webpack-plugin 插件的方法非常简单。我们只需要在 webpack.config.js 文件中做一些配置即可。
首先，我们需要在文件头部引入插件。
const ExtractTextPlugin = require('extract-text-webpack-plugin');然后，在 plugins 配置数组中添加插件。
plugins: [
new ExtractTextPlugin('style.css'),
]这里的 'style.css' 是指分离出来的 CSS 文件的文件名。如果有多个 entry，我们可以在 filename 中使用 [name] 来代替文件名的部分。
plugins: [
new ExtractTextPlugin('[name].css'),
]最后，我们需要在 module.rules 数组中添加 loader。
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ---------------
---
--
--
--这里的 fallback 指当 CSS 未被提取时使用的 loader。use 数组中指定了在提取后如何处理 CSS。
示例代码
下面是一个完整的 webpack.config.js 文件示例。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - ---------------------------------------
-------------- - -
------ -
----- ----------------
------ -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ---------------
---
--
--
--
-------- -
--- --------------------------------
--
--总结
使用 extract-text-webpack-plugin 插件分离 CSS 文件可以提高页面加载速度，改善用户体验。在实际开发中，我们需要根据项目需要进行相应的配置，例如指定文件名，处理多个 entry 等。
通过学习本文，相信读者已经能够掌握使用 extract-text-webpack-plugin 插件分离 CSS 文件的基本方法，希望能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664f208fd3423812e401d750
