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: {
// ...
}
]
- test/include/exclude 都是匹配条件，其中 test 和 include 具有相同的作用，都是必须匹配选项，exclude 是不匹配的选项（优先级高于 test 和 include ）。一般推荐使用 test 和 include 的组合。
- loaders 数组也推荐使用 use
- 此时引用 loader 时，不再省略
-loader，必须写全。（当然也可通过配置resolveLoader: moduleExtensions: ["-loader"]启用这一写法，不过不推荐这样做）
tips
- 现在我们不需要为 json 文件 添加 loader 了，因为 webpack 遇到 json 文件的时候，会自动尝试通过
json-loader引入 json 文件。
