webpack系列之CSS样式处理（含实例）

讲过前两节的接收，我们对webpack有了基本的认识，对HtmlWebpackPlugin插件的各个属性也做了简要的说明，对其他相关属性可以参考。说完了js、html，我们来说一说css相关的配置。首先你可以试验一下，为我们编写的index.html文件编写样式，是不是直接使用相对路径引入css文件就可以了呢。答案是不可以的，因为HtmlWebpackPlugin会将index.html文件原样输出，所以打包生成的index.html文件相对路径下，并不能找到你所编写的CSS文件。这时候，就需要配置CSS解析loader了。
我们同样可以把CSS文件看作是类似于JS文件的模块，通过require语法在相关的JS文件进行引入，嵌入到打包的bundle.js文件中。接下来通过实例，你可能有更多的了解。
当前项目目录结构：

webpackDemo2
  --node_modules
  --src
    --css
		--a.css
		--index.css
    --js
		--a.js
	--index.js
    --index.html
  --package.json
  --webpack.config.js
  --yarn.lock

// a.js
body {
  font-size: 20px;
  color:red;
}

//index.css
@import './a.css';
body {
  background: yellowgreen;
}

//index.js
let str = require('./js/a.js');
console.log(str);

//在js中引入css文件
require('./css/index.css');

上述的CSS样式在这里不在额外说明了，其中，@import为CSS中的规则，在index.css文件中引入a.css，我们先来看看，在webpack中对CSS样式如何配置。

• （1）在webpack.config.js中制定CSS样式处理规则

//webpack.config.js
module.exports = {
...
module: {
	//规则，可理解为对某个文件应如何处理
	rules: [
		{
			test: /\.css$/, //正则表达式，对所有.css结尾的文件，应使用use中的loader进行处理
			use: [
				{
					loader: 'style-loader',
					options: {}
				},
				'css-loader'
			]
		}
	]
}
}

接下来，我们对上述配置进行简单的介绍：

css-loader:处理CSS中特殊的操作，比如在index.css中通过@import ‘./a.css’，可以将a.css与index.css处理成一个CSS文件
style-loader:将CSS文件插入到HTML文件中的head标签中
loader的特点：
（1）职责单一，每个loader具有独立的作用，可以将多个loader组合使用
（2）使用一个loader可以使用字符串，多个loader需要使用数组，
（3）loader的加载也是有顺序的，默认时从右向左执行
（4）每个loader也可以写成对象的方式，目的是可以给loader传递参数，没有的话，可以不写。

• （2）安装css-loader和style-loader插件

yarn add css-loader style-loader -D

• （3）运行打包命令npx webpack和开启服务器命令npx webpack-dev-server
• （4）在浏览器中输入http://localhost:3000
  *
  可以看到，达到我们的效果了。
  案例代码，参加github