webpack loader自定义与使用

每个loader都是一个nodejs模块，我觉得类似于一个中间件，loader函数的参数是源代码或者其他loader操作之后的字符串代码，loader是对resource进行一定的处理，最后抛出处理后的resource
module.exports=function(resource){ return resource; }
为了实现loader可以被链式使用，我们可以使用loader提供的
loader-utils库
const callback = this.async(); 使用callback返回resource
utilsLoader.getOptions(this).reg 使用getOptions可以获取webpack中在该loader使用时定义的options…

下面写一个简单loader测试一下：删除多行注释的loader removenotes-loader.js

var utilsLoader = require('loader-utils');
module.exports = function (resource) {
  this.cacheable();
  const callback = this.async();
  // 1.// 2./* */ 3./** */ 
  var reg = /(\/\*[\s\S]*?\*\/)/g;  //清除多行注释
  if (utilsLoader.getOptions(this).reg === 'alls') reg = /(\/\/.+)|(\/\*[\s\S]*?\*\/)/g
  resourse = deleteCodeComments(resourse, reg);
  callback(null, resourse);
}

function deleteCodeComments(code, reg) {
  // 另一种思路更简便的办法
  // 将'://'全部替换为特殊字符，删除注释代码后再将其恢复回来
  var tmp1 = ':\/\/';
  var regTmp1 = /:\/\//g;
  var tmp2 = '@:@/@/@';
  var regTmp2 = /@:@\/@\/@/g;
  code = code.replace(regTmp1, tmp2);
  code = code.replace(reg, '');
  result = code.replace(regTmp2, tmp1);
  return result;
}

写好的loader如何使用呢？
1、发布到npm上 install并使用
2、放在本地文件夹中作为私有loader使用
第2种方法的使用如下：在webpack.config.js中配置

resolveLoader: {
    // 先在本地loader中找对应的loader；再在node_modules中查找
    modules: [path.join(__dirname, './resourse/loader'), 'node_modules']
  }