在前端开发中，我们经常需要使用样式文件来美化我们的网页。但是，将样式文件和前端代码一起打包会导致页面加载速度变慢，影响用户体验。因此，通常需要把样式文件单独打包成一个文件进行加载。
在本文中，我们将介绍如何使用 Webpack 和 ExtractTextPlugin 插件来单独打包 CSS 样式文件。
安装要求
在开始之前，你需要确保已安装了以下软件：
- Node.js
- npm 或者 yarn
安装依赖
首先，在项目目录下打开控制台，输入以下命令安装必要依赖：
npm install --save-dev extract-text-webpack-plugin css-loader
在这里，我们使用 extract-text-webpack-plugin 插件来把样式文件单独打包，并且使用 css-loader 加载和解析 CSS 文件。
配置 webpack.config.js 文件
接下来，在项目根目录下创建 webpack.config.js 文件，配置如下：
-- -------------------- ---- -------
----- ----------------- - ---------------------------------------
-------------- - -
------ - ------ ---------------- --
------- -
----- --------------------
--------- -----------
--
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
--
-
----- --------
-------- ---------------
---- ----------------
-
-
--
-------- -
--- ---------------------------- --------------
-
--在这里，我们定义了一个名为 extract-text-webpack-plugin 的插件，并把 CSS 样式文件打包到名为 bundle.css 的文件中。注意，在使用 extract() 方法时需要传递 fallback 和 use 参数。
编写示例代码
在开始编写本文示例代码之前，请先确保已有 React 项目并安装了 Webpack、Babel 等必要依赖。
首先，在项目的 src 目录下创建一个名为 Button.js 的组件，代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------------
----- ------ ------- --------- -
-------- -
------ -
------- ------------------------------------------
--
-
-
------ ------- -------在这里，我们加载了一个 .css 文件，并把样式应用于按钮。
接下来，在同一目录下创建名为 Button.css 的 CSS 文件，代码如下：
-- -------------------- ---- ------- ---- - ----------------- -------- ------- ----- ------ ------ -------- ---- ----- ----------- ------- ---------- ----- ------- -------- -
这是一个简单的样式表，可以使按钮看起来更美观。
最后，在项目的根目录下创建 index.js 文件，代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './src/Button';
ReactDOM.render(
<Button text="Click me!" />,
document.getElementById('root')
);此时，我们已经准备好了一个简单的项目，并编写了样式文件。现在可以使用 Webpack 打包整个项目了。
运行项目
在控制台中输入以下命令来构建并启动项目：
npm run build
当构建成功后，在浏览器中打开 index.html 文件，你会看到一个美丽的按钮。
至此，我们就使用 ExtractTextPlugin 插件成功地将 CSS 样式文件单独打包到了 bundle.css 文件中，使得页面加载速度更快，提升了用户体验。
总结
通过本文的介绍，我们了解了如何使用 Webpack 和 ExtractTextPlugin 插
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a1c697d4982a6ebc78c4c