About rules parameter processing in webpack

if (rule.test || rule.include || rule.exclude) {

 // 标记使用参数

 checkResourceSource("test + include + exclude");

 // 没有就是undefined

 condition = {

 test: rule.test,

 include: rule.include,

 exclude: rule.exclude

 };

 // 处理常规参数

 try {

 newRule.resource = RuleSet.normalizeCondition(condition);

 } catch (error) {

 throw new Error(RuleSet.buildErrorMessage(condition, error));

 }

}

let resourceSource;

// ...

function checkResourceSource(newSource) {

 // 第一次直接跳到后面赋值

 if (resourceSource && resourceSource !== newSource)

 throw new Error(RuleSet.buildErrorMessage(rule, new Error("Rule can only have one resource source (provided " + newSource + " and " + resourceSource + ")")));

 resourceSource = newSource;

}

class RuleSet {

 constructor(rules) { /**/ };

 static normalizeCondition(condition) {

 // 假值报错

 if (!condition) throw new Error("Expected condition but got falsy value");

 // 检测给定字符串是否以这个开头

 if (typeof condition === "string") { return str => str.indexOf(condition) === 0; }

 // 函数直接返回

 if (typeof condition === "function") { return condition; }

 // 正则表达式返回一个正则的test函数

 if (condition instanceof RegExp) { return condition.test.bind(condition); }

 // 数组map递归处理 有一个满足返回true

 if (Array.isArray(condition)) {

  const items = condition.map(c => RuleSet.normalizeCondition(c));

  return orMatcher(items);

 }

 if (typeof condition !== "object") throw Error("Unexcepted " + typeof condition + " when condition was expected (" + condition + ")");

 const matchers = [];

 // 对象会对每个值进行函数包装弹入matchers中

 Object.keys(condition).forEach(key => {

  const value = condition[key];

  switch (key) {

  case "or":

  case "include":

  case "test":

   if (value)

   matchers.push(RuleSet.normalizeCondition(value));

   break;

  case "and":

   if (value) {

   const items = value.map(c => RuleSet.normalizeCondition(c));

   matchers.push(andMatcher(items));

   }

   break;

  case "not":

  case "exclude":

   if (value) {

   const matcher = RuleSet.normalizeCondition(value);

   matchers.push(notMatcher(matcher));

   }

   break;

  default:

   throw new Error("Unexcepted property " + key + " in condition");

  }

 });

 if (matchers.length === 0)

  throw new Error("Excepted condition but got " + condition);

 if (matchers.length === 1)

  return matchers[0];

 return andMatcher(matchers);

 }

}

class RuleSet {

 constructor(rules) { /**/ };

 /*

 Example:

 {

  test: /\.js$/,

  loader: 'babel-loader',

  include: [resolve('src'), resolve('test')]

 }

 */

 /*

 condition:

 {

  test: /\.js$/,

  include: ['d:\\workspace\\src', 'd:\\workspace\\test'],

  exclude: undefined

 }

 */

 static normalizeCondition(condition) {

 // include返回类似于 [(str) => str.indexOf('d:\\workspace\\src') === 0,...] 的函数

 if (typeof condition === "string") { return str => str.indexOf(condition) === 0; }

 // test参数返回了 /\.js$/.test 函数

 if (condition instanceof RegExp) { return condition.test.bind(condition); }

 // include为数组

 if (Array.isArray(condition)) {

  const items = condition.map(c => RuleSet.normalizeCondition(c));

  return orMatcher(items);

 }

 const matchers = [];

 // 解析出['test','include','exclude']

 Object.keys(condition).forEach(key => {

  const value = condition[key];

  switch (key) {

  // 此value为一个数组

  case "include":

  case "test":

   if (value)

   matchers.push(RuleSet.normalizeCondition(value));

   break;

  // undefined跳过

  case "exclude":

   if (value) { /**/ }

   break;

  default:

   throw new Error("Unexcepted property " + key + " in condition");

  }

 });

 return andMatcher(matchers);

 }

}

function orMatcher(items) {

 // 当一个函数被满足条件时返回true

 return function(str) {

 for (let i = 0; i < items.length; i++) {

  if (items[i](str))

  return true;

 }

 return false;

 };

}

function andMatcher(items) {

 // 当一个条件不满足时返回false

 return function(str) {

 for (let i = 0; i < items.length; i++) {

  if (!items[i](str))

  return false;

 }

 return true;

 };

}

if (rule.resource) {

 // 如果前面检测到了test || include || exclude参数 这里会报错

 checkResourceSource("resource");

 try {

 newRule.resource = RuleSet.normalizeCondition(rule.resource);

 } catch (error) {

 throw new Error(RuleSet.buildErrorMessage(rule.resource, error));

 }

}

/*

方式1:

 rules:[

 {

  test: /\.js$/,

  loader: 'babel-loader',

  include: [resolve('src'), resolve('test')]

 }

 ]

*/

/*

方式2:

 rules:[

 {

  resource:{

  test: /\.js$/,

  include: [resolve('src'), resolve('test')]

  exclude: undefined

  }

 }

 ]

*/

const loader = rule.loaders || rule.loader;

// 单loader情况

if (typeof loader === "string" && !rule.options && !rule.query) {

 checkUseSource("loader");

 newRule.use = RuleSet.normalizeUse(loader.split("!"), ident);

}

// loader配合options或query出现

else if (typeof loader === "string" && (rule.options || rule.query)) {

 checkUseSource("loader + options/query");

 newRule.use = RuleSet.normalizeUse({

 loader: loader,

 options: rule.options,

 query: rule.query

 }, ident);

}

// options与query同时出现报错

else if (loader && (rule.options || rule.query)) {

 throw new Error(RuleSet.buildErrorMessage(rule, new Error("options/query cannot be used with loaders (use options for each array item)")));

}

/*

 处理这种愚蠢用法时：

 {

 test: /\.css$/,

 loader: [{ loader: 'less-loader' }, { loader: 'css-loader' }]

 }

*/

else if (loader) {

 checkUseSource("loaders");

 newRule.use = RuleSet.normalizeUse(loader, ident);

}

// 单独出现options或者query报错

else if (rule.options || rule.query) {

 throw new Error(RuleSet.buildErrorMessage(rule, new Error("options/query provided without loader (use loader + options)")));

}

static normalizeUse(use, ident) {

 // 单loader字符串

 if (Array.isArray(use)) {

 return use

  // 如果是单loader情况这里会返回[[loader1...],[loader2...]]

  .map((item, idx) => RuleSet.normalizeUse(item, `${ident}-${idx}`))

  // 扁平化后变成[loader1,loader2]

  .reduce((arr, items) => arr.concat(items), []);

 }

 // 对象或字符串

 return [RuleSet.normalizeUseItem(use, ident)];

};

// indet => 'ref-'

static normalizeUseItem(item, ident) {

 if (typeof item === "function")

 return item;

 if (typeof item === "string") {

 return RuleSet.normalizeUseItemString(item);

 }

 const newItem = {};

 if (item.options && item.query) throw new Error("Provided options and query in use");

 if (!item.loader) throw new Error("No loader specified");

 newItem.options = item.options || item.query;

 // 防止options:null的情况

 if (typeof newItem.options === "object" && newItem.options) {

 // 这里只是为了处理ident参数

 if (newItem.options.ident)

  newItem.ident = newItem.options.ident;

 else

  newItem.ident = ident;

 }

 // 取出loader参数

 const keys = Object.keys(item).filter(function(key) {

 return ["options", "query"].indexOf(key) < 0;

 });

 keys.forEach(function(key) {

 newItem[key] = item[key];

 });

 /*

 newItem =

 {

 loader:'原字符串',

 ident:'ref-', (或自定义)

 options:{...}

 }

 */

 return newItem;

}

/*

Example:

{

 test: /\.css$/,

 loader: 'css-loader?{opt:1}!style-loader'

}

[{loader:'css-loader',options:{opt:1}},

{loader:'style-loader'}]

*/

static normalizeUseItemString(useItemString) {

 // 根据'?'切割获取loader的参数

 const idx = useItemString.indexOf("?");

 if (idx >= 0) {

 return {

  loader: useItemString.substr(0, idx),

  // 后面的作为options返回

  options: useItemString.substr(idx + 1)

 };

 }

 return {

 loader: useItemString

 };

}

if (rule.use) {

 checkUseSource("use");

 newRule.use = RuleSet.normalizeUse(rule.use, ident);

}

/*

 {

 test:/\.css$/,

 user:['css-loader','style-loader]

 }

*/

/*

 {

 test:/\.css$/,

 user:{

  loader:'css-loader',

  options:'1'

 }

 }

*/

rules、oneOf

if (rule.rules)

 newRule.rules = RuleSet.normalizeRules(rule.rules, refs, `${ident}-rules`);

if (rule.oneOf)

 newRule.oneOf = RuleSet.normalizeRules(rule.oneOf, refs, `${ident}-oneOf`);

const keys = Object.keys(rule).filter((key) => {

 return ["resource", "resourceQuery", "compiler", "test", "include", "exclude", "issuer", "loader", "options", "query", "loaders", "use", "rules", "oneOf"].indexOf(key) < 0;

});

keys.forEach((key) => {

 newRule[key] = rule[key];

});

// 防止rules:[]的情况

if (Array.isArray(newRule.use)) {

 newRule.use.forEach((item) => {

 // ident来源于options/query的ident参数

 if (item.ident) {

  refs[item.ident] = item.options;

 }

 });

}