webpack处理css

在神奇的babel中我们提到了babel-loder的使用，那么webpack声称可以处理任何类型的文件，css该怎么处理呢，好，我们来走一遍

首先介绍下style-loader和css-loader，因为处理css文件之前必须要安装这两个模块，至于这俩是从哪冒出来的，请看点击打开链接，这里详细介绍了各种loader的使用场景。

npm install css-loader style-loader

命令行安装成功后，我在src/css下面新建了common.css文件，并且在app.js中通过import引入，要成功引入并生效，需要修改webpack.config.js文件

好，运行webpack，你会发现common.css真的在生成的index.html中生效了

讲到这里，再给大家介绍一个神器——postcss-loader

先来看官网的介绍postcss-loader官网介绍

老套路，先安装

npm install postcss-loader --save-dev

 关于配置使用，官网也给了例子

好，参照官网的使用方法，我们如下配置

现在postcss-loader的配置基本完成了，是不是可以直接运行使用了呢，不，postcss是需要跟具体插件配合使用的，看官网postcss plugins

官网中给我们列出了很多可用插件，也提到了当下 最受欢迎的一个——Autoprefixer  ，以此为例我们安装使用一下

npm install autoprefixer --save-dev

在这里我采用新建一个postcss.config.js文件的方式

运行webpack

好，我们看生成的index.html页面

好了，webpack处理css先说这么多，最重要的还是解决问题的思路和方式，具体的方法随着社区的完善在不断发生细微的变化，不管怎么变，官方文档的地址不变。