webpack 为我们构建 webapp 带来了极大的便利。回顾之前我们写前端页面的时候，我们必须在目录配置／资源管理上下一番功夫，确保我们的项目目录有条不絮，清晰易懂。但是这样无形间占用了我们大量的开发时间。
而在webpack中，所有的资源，不只是js文件，包括图片，css等，都可以作为一个模块直接引用到我们的项目中。而我们需要做的，仅仅是针对不同类型的资源，配置相应的 loader。

webpack loader

那么 loader 应该怎么配置呢？

loaders

loaders: [
      {
        test: /\.css$/, //正则匹配文件
        loaders: [ // 对应的loader
         "style-loader", 
         "css-loader?modules=true"
      }
]

这里的loaders数组包含了一系列的加载器，它也等价与下面的写法

//loader 可以链式调用，上一个 loader 的输出被作为输入传给下一个 loader
loader : "style-loader!css-loader?modules=true"

值得注意的一点是，这里在引用loader的时候，-loader 是可以省略的，不过loaders 是webpack1.x的写法，现在已经不支持使用。

rules

webpack2.x 之后，loaders 被 rules 代替

rules:[
    {
        test: /\.css$/,
        include: [
            path.resolve(__dirname, "app")
        ],
        exclude: [
            path.resolve(__dirname, "app/demo-files")
        ],
        use: [
            {
                loader: "style-loader"
            },
            {
                loader: "css-loader",
                options: {
                    modules: true
                }
            }
        ]
    },{
        test: /\.jsx$/,
        loader: "babel-loader", // 这里不再使用 "use"
        options: {
          // ...
        }
]

1. test/include/exclude 都是匹配条件，其中 test 和 include 具有相同的作用，都是必须匹配选项，exclude 是不匹配的选项（优先级高于 test 和 include ）。一般推荐使用 test 和 include 的组合。
2. loaders 数组也推荐使用 use
3. 此时引用 loader 时，不再省略-loader，必须写全。（当然也可通过配置resolveLoader: moduleExtensions: ["-loader"]启用这一写法，不过不推荐这样做）

tips

1. 现在我们不需要为 json 文件 添加 loader 了，因为 webpack 遇到 json 文件的时候，会自动尝试通过 json-loader 引入 json 文件。