2-1 (webapack4 loader)-webpack加载css所需lodar及其使用方式

webpack官网对Loader的解释：
需要注意的是，webpack是JavaScript 应用程序的静态模块打包器，不能处理javascript以外类型的文件，loader可以让 webpack 能够去处理那些非 JavaScript 文件。

1.首先，我们需要安装loader：
需要安装两个，分别为：style-loader 和 css-loader
打开终端，进入项目文件夹的路径，输入安装命令为：npm install style-loader css-loader --save-dev
2.配置loader
1）在webpack.config.js文件里配置module中的rules：
注意：在 webpack 的配置中 loader 有两个目标：
test 属性：用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性：表示进行转换时，应该使用哪个 loader。
在webpack.config.js文件里配置module中的rules
webpack.config.js全部代码为：

const path = require('path');


module.exports = {
   // path指文件打包后存放的路径
   entry:'./public/index.js',
   output:{
   	//path.resolve()方法将路径或路径片段的序列处理成绝对路径
   	//__dirname表示当前文件所在目录的绝对路径
   	path:path.resolve(__dirname,'build'),
   	//filename是打包后的文件名称
   	filename:'bundle.js'
   },
   devServer:{
   	contentBase:'./build',//设置服务器访问的基本目录,就是我们打包完成的目录
   	host:'localhost',//服务器的IP地址
   	port:8080,//端口号
   	open:true,//自动打开页面
   },
   module:{
   	rules:[
   		{
   			test:/\.css$/,
   			use:['style-loader','css-loader']
   		}
   	]
   }
}

3.运行npm run dev
这时就已经打包好啦，你会在build文件夹下发现一个bundle.js文件，新建一个html文件，把bundle.js文件引入就可以了，这时你设置的css就可以生效啦。
注意要在index.js文件中引入css，代码为：
import './index.css';