oracle no parse,webpack noParse参数

webpack noParse

webpack精准过滤不需要解析的文件

webpack配置中 module配置下有一条配置项叫noParse

{

module:{

noParse: /jquery|lodash/, //接收参数 正则表达式 或函数

noParse:function(contentPath){

return /jquery|lodash/.test(contentPath);

}

}

}

主要用到的是函数部分

function (contentPath){

//contentPath 是一个复合的路径 ，基于webpack3测试

//包含loader路径以及资源路径，而我们需要过滤的仅仅是资源路径

//contentPath结构 loader1!loader2!...loaderx!assetsPath

}

假如一个css资源index.css，loader配置如下

use:[{

loader: 'style-loader' //生成的css插入到html

}, {

loader: 'css-loader' //使js中能加载css

}]

那么contentPath会如下

contentPath = E:/project/node_modules/css-loader/index.js!E:/project/node_modules/style-loader/index.js!E:/project/src/index.css!

但是我们只需要过滤资源路径

完整代码如下:

noParse: function(contentPath) {

//contentPath 构成 loader1Path!loader2Path!assetsPath

//我们只需要过滤webpack解析资源的路径 而不需要过滤loader的路径

contentPath = contentPath.split("!").pop();

let shouldNotParse = false,

filename = contentPath.split("\\").pop(),

prefixPath = contentPath.split("\\"),

noParseFolders = [/static/, /node_modules/], //不需要解析的文件夹名称的正则表达式

noParseFiles = [/jquery/]; //不需要解析的文件名称

shouldNotParse = prefixPath.find(curPath => {

return noParseFolders.find(folderExp => folderExp.test(curPath));

});

!shouldNotParse && (shouldNotParse = noParseFiles.find(exp => exp.test(filename)));

return !!shouldNotParse;

}