glob 在webpack中的使用。

glob 在webpack中对文件的路径处理很是之方便，好比当搭建多页面应用时就可使用glob对页面须要打包文件的路径进行很好的处理。

官方文档地址 ： https://www.npmjs.com/package/glob 

我没有找到中文文档地址。通过一段时间的学习，本着互联网分享精神。我现将我学习思路以及想法记录以下，分享给你们，但愿对你们有所帮助。

本文章 所有案例源码：http://pan.baidu.com/s/1b9QB6I

安装

npm install glob -save-dev  

目录结构

 

使用

　　在webpac.config.js中引入glob

　var glob = require("glob")

 　　glob方法能够传入三个参数。

　　一、须要进行匹配的文件的路径（有点相似于正则表达式，可是比那个要简单的多。）。

　　二、option可选项，也能够不填写。

　　三、回调函数，回调函数内部能够返回两个参数，一个是匹配成功后的结果会返回一个数组，若是没有匹配上不会报错会返回一个空数组，一个是失败后的结果。

　　示例代码

glob("**/*.js", options, function (er, files) {
　　console.log(files)
})

 　　下列字符在路径部分使用时具备特殊的特殊意义

　　一、* ：匹配单个路径部分中的0个或多个字符。

　　二、?：匹配路径中某部分1个字符。

　　三、[...] ：匹配一个字符的范围，相似于一个正则表达式的范围。若是范围的第一个字符是！或者，它匹配任何不在范围内的字符。

　　四、!(模式1|模式2|模式3)：匹配与所提供的任何模式不匹配的任何内容。和正则表达式的!同样。

　　五、?(模式1|模式2|模式3)：匹配所提供的模式的零或一个事件。

　　六、+(模式1|模式2|模式3)：匹配所提供的模式的一个或多个事件。

 　  七、*(a|b|c) ：匹配所提供的模式的零个或多个事件。

　　八、@(pattern|pat*|pat?erN)：匹配所提供的模式之一。

　　九、**：若是**在一个路径的部分，他会匹配零个或多个目录和子目录中搜索匹配。

 　　*和**的使用方法

　　注意这里也用到了**，这段匹配模式表明的是src/components/**（下因此的文件夹）/*.js（文件名包含.js的文件路径）

glob("./src/components/**/*.js", function (er, files) {
    console.log(files);
    return files
});
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]

 　　？的使用方法

　　　注意？匹配的是一个任意字符。

glob("./src/components/**/?.js", function (er, files) {
    console.log(files);
    return files
});
//[ './src/components/news/n.js' ]

　　固然也能够写多个？

glob("./src/components/**/????.js", function (er, files) {
    console.log(files);
    return files
});
// [ './src/components/news/news.js' ]

　　[...]的使用方法

　　[...]内能够写入须要匹配的组合字符例如：案例中会匹配 indea.js，indeb.js.....indez.js，固然也可单独制定，例如"./src/components/**/inde[x,k].js"

glob("./src/components/**/inde[a-z].js", function (er, files) {
    console.log(files)
})
//[ './src/components/index/index.js' ]

 

　　!（）的使用方法，理解为反的意思，其实这个没什么说的， 稍微懂点js的都会。和运算表达式中的！同样。

　　案例中的意思是不要n.js 不要index.js，因此就只剩下new.js了。

glob("./src/components/**/!(n|index).js", function (er, files) {
    console.log(files)
})
// [ './src/components/news/news.js' ] 

 　　?（）的使用方法

glob("./src/components/**/?(news|index|n).js", function (er, files) {
    console.log(files)
});
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]

 

 　　+（）的使用方法

　　本案例中会匹配in.js，news.js，dex.js，innews.js，index.js，newsdex.js 他会先匹配自身是否会匹配上，而后在和其余模式组合在进行匹配。

glob("./src/components/**/+(in|news|dex).js", function (er, files) {
    console.log(files)
});
// [ './src/components/index/index.js',
//     './src/components/news/news.js' ]

 

　　@（）的使用方法

　　他会完整匹配备选模式中的其中一个，只要有一个模式匹配上就会被匹配

glob("./src/components/**/@(index|n|news).js", function (er, files) {
    console.log(files)
});
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]

 使用同步语法实现以上案例

在上述案例中使用的都是异步请求，调用回调获得结果，其实glob也提供了同步返回结果的API ，在这里我只列举一个。

let pattern = './src/components/**/@(index|n|news).js';
console.log(glob.sync(pattern));
// [ './src/components/index/index.js',
//     './src/components/news/n.js',
//     './src/components/news/news.js' ]