React学习手册

108

｜

第

5

章

打包

CSS

webpack

另外一个非常有用的特性是，它可以将

CSS

打包成与打包过的

JavaScript

文件类似的文件。这使得用户可以下载包含应用程序所需的所有

CSS

和

JavaScript

代码的单个文件。

CSS

可以使用

import

语句引入

bundle

打包文件。这些语句告知

webpack

使用

JavaScript

模块将相关的

CSS

文件打包：

import Recipe from './Recipe'

import '../../stylesheets/Menu.css'

const Menu = ({ recipes }) =>

<article>

<header>

<h1>Delicious Recipes</h1>

</header>

<div className="recipes">

{ recipes.map((recipe, i) =>

<Recipe key={i} {...recipe} />)

}

</div>

</article>

export default Menu

为了在

webpack

配置中实现对

CSS

文件的打包，用户需要安装相关的加载器：

npm install style-loader css-loader postcss-loader --save-dev

最后，用户还必须在

webpack

配置中声明这些加载器：

rules: [

{

test: /\.js$/,

exclude: ...