在前端开发中，我们经常需要使用样式文件来美化我们的网页。但是，将样式文件和前端代码一起打包会导致页面加载速度变慢，影响用户体验。因此，通常需要把样式文件单独打包成一个文件进行加载。
在本文中，我们将介绍如何使用 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 文件，配置如下：
// javascriptcn.com 代码示例
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: { index: './src/index.js' },
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
plugins: [
new ExtractTextPlugin({filename: 'bundle.css'})
]
};在这里，我们定义了一个名为 extract-text-webpack-plugin 的插件，并把 CSS 样式文件打包到名为 bundle.css 的文件中。注意，在使用 extract() 方法时需要传递 fallback 和 use 参数。
编写示例代码
在开始编写本文示例代码之前，请先确保已有 React 项目并安装了 Webpack、Babel 等必要依赖。
首先，在项目的 src 目录下创建一个名为 Button.js 的组件，代码如下：
// javascriptcn.com 代码示例
import React, { Component } from 'react';
import './Button.css';
class Button extends Component {
render() {
return (
<button className="btn">{this.props.text}</button>
);
}
}
export default Button;在这里，我们加载了一个 .css 文件，并把样式应用于按钮。
接下来，在同一目录下创建名为 Button.css 的 CSS 文件，代码如下：
// javascriptcn.com 代码示例
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
}这是一个简单的样式表，可以使按钮看起来更美观。
最后，在项目的根目录下创建 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