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;
}
