一切皆模块
Webpack有一个不可不说的优点，它把所有的文件都都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loader都可以被处理。
CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
继续上面的例子
//安装npm install --save-dev style-loader css-loader
//使用module.exports = { ??... ???module: { ???????rules: [ ???????????{ ???????????????test: /(\.jsx|\.js)$/, ???????????????use: { ???????????????????loader: "babel-loader" ???????????????}, ???????????????exclude: /node_modules/ ???????????}, ???????????{ ???????????????test: /\.css$/, ???????????????use: [ ???????????????????{ ???????????????????????loader: "style-loader" ???????????????????}, { ???????????????????????loader: "css-loader" ???????????????????} ???????????????] ???????????} ???????] ???}};请注意这里对同一个文件引入多个loader的方法。
接下来，在app文件夹里创建一个名字为"main.css"的文件，对一些元素设置样式
/* main.css */html { ?box-sizing: border-box; ?-ms-text-size-adjust: 100%; ?-webkit-text-size-adjust: 100%;}*, *:before, *:after { ?box-sizing: inherit;}body { ?margin: 0; ?font-family: ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;}h1, h2, h3, h4, h5, h6, p, ul { ?margin: 0; ?padding: 0;}我们这里例子中用到的webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下
//main.jsimport React from ‘react‘;import {render} from ‘react-dom‘;import Greeter from ‘./Greeter‘;import ‘./main.css‘;//使用require导入css文件render(<Greeter />, document.getElementById(‘root‘));通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的。
上面的代码说明webpack是怎么把css当做模块看待的，咱们继续看一个更加真实的css模块实践。
CSS module
在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，配合优化工具，依赖管理和加载管理可以自动完成。
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧巨大且充满了全局类名，维护和修改都非常困难。
最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递到所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中使用相同的类名造成冲突。具体的代码如下
module.exports = { ???... ???module: { ???????rules: [ ???????????{ ???????????????test: /(\.jsx|\.js)$/, ???????????????use: { ???????????????????loader: "babel-loader" ???????????????}, ???????????????exclude: /node_modules/ ???????????}, ???????????{ ???????????????test: /\.css$/, ???????????????use: [ ???????????????????{ ???????????????????????loader: "style-loader" ???????????????????}, { ???????????????????????loader: "css-loader", ???????????????????????options: { ???????????????????????????modules: true ???????????????????????} ???????????????????} ???????????????] ???????????} ???????] ???}};在app文件夹下创建一个Greeter.css文件
.root { ?background-color: #eee; ?padding: 10px; ?border: 3px solid #ccc;}导入.root到Greeter.js中
import React, {Component} from ‘react‘;import config from ‘./config.json‘;import styles from ‘./Greeter.css‘;//导入class Greeter extends Component{ ?render() { ???return ( ?????<div className={styles.root}>//添加类名 ???????{config.greetText} ?????</div> ???); ?}}export default Greeter放心使用把，相同的类名也不会造成不同组件之间的污染
CSS modules 也是一个很大的主题，有兴趣的话可以去官方文档查看更多消息
CSS预处理器
Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，
你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders:
Less LoaderSass LoaderStylus Loader
不过其实也存在一个CSS的处理平台-PostCSS，它可以帮助你的CSS实现更多的功能，在其官方文档可了解更多相关知识。
举例来说如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,并添加如下代码之后，重新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不同前缀了。
//webpack.config.jsmodule.exports = { ???... ???module: { ???????rules: [ ???????????{ ???????????????test: /(\.jsx|\.js)$/, ???????????????use: { ???????????????????loader: "babel-loader" ???????????????}, ???????????????exclude: /node_modules/ ???????????}, ???????????{ ???????????????test: /\.css$/, ???????????????use: [ ???????????????????{ ???????????????????????loader: "style-loader" ???????????????????}, { ???????????????????????loader: "css-loader", ???????????????????????options: { ???????????????????????????modules: true ???????????????????????} ???????????????????}, { ???????????????????????loader: "postcss-loader" ???????????????????} ???????????????] ???????????} ???????] ???}}// postcss.config.jsmodule.exports = { ???plugins: [ ???????require(‘autoprefixer‘) ???]}至此，本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法，它们其实也是两个单独的平台，配合webpack可以很好的发挥它们的作用。接下来介绍Webpack中另一个非常重要的功能-Plugins
webpack使用五
原文地址：http://www.cnblogs.com/ldlx-mars/p/7748632.html