Webpack原理 24 -- 自定义loader1 . clean-log-loader 2 . banner-loa

1 . clean-log-loader

清除文件中的所有 console.log(xxx) 语句。

module.exports = function(content){
    return content.replace(/console\.log\(.*\);?/g,"");
}

2 . banner-loader

给打包后的文件，加上作者信息

module.exports = function(content){

    // schema 是对 options 的验证规则 
    // schema 符合 JSON Schema 的规则！！！
    const options = this.getOptions(schema);
    
    const prefix = `Author: ${options.author}`;
    
    return prefix + content;
}

loader的配置 options：

如下：为schema规则的配置

在 schema.json 文件中：

第一行：表示 options 的类型是对象
第二行：表示 options 里面有哪些属性
第四行：表示属性 author 的类型数字符串
最后一行：表示 options 不允许添加新属性

3 . babel-loader

将 ES6 代码编译为 ES5以下的代码

module.exports = function(content){
   // 异步 loader
   const callback = this.async();
   const options = this.getOptions(schema);
   
   // 使用 babel 对代码进行编译
   babel.transform(content,options,function(err,result{
         if(err) callback(err);
         else callback(null,result.code);
   })
}

如下：为schema规则的配置

在 schema.json 文件中：

4 . file-loader

将图片、字体图标等资源原封不动的输出去。

module.exports = function(content){

// 1 . 根据文件内容生成带 hash 值的文件名
   const interpolatedName = loaderUtils.interpolateName(this,"[hash].[ext][qiery]",{content});

// 2 . 将文件输出去
this.emitFile(interpolaedName,content);

// 3 . 返回 ： "module.exports = "文件路径（文件名）""
return `module.exports = "${interpolatedName}"`;   
}

// 需要使用 raw loader ，因为图片等为二进制文件

module.exports.raw = true;

下载包：npm i loader-utils，生成需要的文件名。

5 . style-loader

将 style 样式动态生成style标签。

一个 css 文件里面可能有图片资源，如果我们只像上面那样写，只会生成一个 style 标签，但里面的图片资源并不能得到处理。

所以我们还要用上 css-loader

而 css-loader 的返回数据是 js 代码，不能直接用。

所以 style-loader 需要再执行返回的 js 代码，然后得到它暴露的返回值，再动态创建 style 标签，插到页面上。

不好操作！！！！！

所以我们可以让一系列操作在一个 loader 中完成！！！！用上 pitch 方法