webpack可以将不同的文件都按照模块的方式进行处理，比如js，css等都可以通过不同的loader进行打包处理。

CSS

webpack为我们提供css-loader和 style-loader两个工具来处理样式表，他们二者处理的任务是不同的。
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能。
style-loader将所有的计算后的样式加入页面中。
这二者组合在一起可以使你能够把样式表嵌入webpack打包后的JS文件中。

安装

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

配置

在webpack.config.js中配置这两个工具

接下来，在app文件夹里创建一个名字的main.css的文件，对一些元素设置样式

body{
    background-color: red;
    border: 5px solid yellow;
}
ul, li{
    list-sytle:none;
}

为了让webpack能找main.css文件，我们要将这个样式导入到main.js中，其它的模块需要通过 import, require, url等与入口文件建立其关联。

main.js文件修改如下：

通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。

CSS module

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，那么如果我们设置的相同class名称较多的时候，那么会造成全局污染。

CSS module功能就是将JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块，这样做有效避免了全局污染。

接下来我们在来改动下webpack.config.js配置文件

我们在app文件夹下创建一个App.css文件，并填入以下代码来进行一下测试

.root {
    height: 30px;
    background-color: green;
    margin-top: 20px;
    border: 2px solid blue;
}

将app.css导入app.js

我们看下页面运行结果