webpack用loader加载css

1. 了解loader

     loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

2.安装loader

安装style-loader和css-loader

下载：

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

3.配置loader

（1）在webpack.config.js文件里配置module中的rules

在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

2. use 属性，表示进行转换时，应该使用哪个 loader。

代码：

 

4.创建css文件并运行命令

     创建index.css文件并import进index.js文件中