本文主要是介绍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先说这么多，最重要的还是解决问题的思路和方式，具体的方法随着社区的完善在不断发生细微的变化，不管怎么变，官方文档的地址不变。
这篇关于webpack处理css的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
