vue项目配置详解（二）

webpack 本身是只能打包js的 但是webpack拥有一个插件的机制，名为Loader，通过Loader,webpack能够针对某一种特定的资源进行处理。

这里是针对不同的模块进行打包解析

test 参数用来指示当前配置项针对哪些资源，该值应是一个条件值(condition)

exclude 参数用来剔除掉需要忽略的资源，该值应是一个条件值(condition)

include 参数用来表示本 loader 配置仅针对哪些目录/文件，该值应是一个条件值

test 参数用来指示文件名（包括文件后缀），而 include 参数则用来指示目录；注意同时使用这两者的时候，实际上是 and 的关系

loader/loaders 参数，用来指示用哪个/哪些 loader 来处理目标资源，这俩货表达的其实是一个意思，只是写法不一样，我个人推荐用 loader 写成一行，多个 loader 间使用!分割，这种形式类似于管道的概念，又或者说是函数式编程。形如loader:'css?!postcss!less'，可以很明显地看出，目标资源先经 less-loader 处理过后将结果交给 postcss-loader 作进一步处理，然后最后再交给 css-loader

plugins

注意：less-loader 并不会针对 url()语法做特别的转换，因此，如果你想把 url()语句里涉及到的文件（比如图片、字体文件等）也一并用 webpack 打包的话，就必须利用管道交给 css-loader 做进一步的处理

url-loader 主要接受以下参数：

limit 参数，数据类型为整型，表示目标文件的体积大于多少字节就换用 file-loader 来处理了，不填则永远不会交给 file-loader 处理。例如require("url?limit=10000!./file.png");，表示如果目标文件大于 10000 字节，就交给file-loader 处理了。