webpack之css文件处理

项目开发过程中，我们必然要添加很多样式，而样式往往在一个单独的文件中。基于webpack模块化编程，我们不用再在head标签中引入多个css文件，那样是很麻烦的，那种方法已经过时了。我们应该将其bundle.js中，即让bundle.js依赖所有样式文件
因为入口文件只有一个main.js所以我们得在其中引入样式文件

require('./css/normal.css')

1npm install --save-dev(意为仅在开发时依赖) css-loader
2npm install --save-dev style-loader
3在webpack.config.js中写如下代码

module:{
	rule:[
	{
	test:/\.css$/,
	use:{'style-loader','css-loader'}
		}
	]
}

我们要在main.js主文件中导入依赖的css文件
其中css-loader只负责将样式文件加载出来，并不负责解析，而style-loader才负责解析
需要注意的是在上述代码中我们按照这种顺序写两个加载器，因为webpack读取时是从右往左读取的，反常规