手写一个webpack loader

loader的本质

loader 本质上是导出为函数的 JavaScript 模块。当webpack解析资源时，会调用相应的 loader 去处理，然后将上一个 loader 产生的结果或者资源文件传入进去。loader 有三个入参：资源文件的内容（content）、可以被 Source Map 使用的 SourceMap 数据（map）、数据，可以是任何内容（meta）。

loader 有同步 Loaders、异步 Loaders 、Raw Loader 、Pitching Loader ，更详细的可以参考 Loader Interface。

具体步骤

下面写一个去除 console.log 的 loader

• 创建一个新的文件作为你的 Loader，例如 clean-log-loader.js 。
• 在文件中，导出一个函数，该函数以源代码作为输入。
• 在函数内部，根据需要操纵源代码进行转换。
• 返回转换后的源代码。

同步 Loaders

例如，假设你想创建一个 Loader，去除每个 JavaScript 文件的中的 console.log ，Loader 所示如下：
同步 loader 有两种写法，如果有多个处理结果，则必须调用 this.callback()，当调用 callback() 函数时，总是返回 undefined，代码如下：

module.exports = function (content, map, meta) {
   
  this.callback(null, someSyncOperation(content), map, meta);
  return;
};
function someSyncOperation(content) {
   
  return content.replace(/console\.log\(.*\);?/g, "");
}

如果只有一个处理结果，可以调用 this.callback()，也可以不用，代码如下：

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

在 webpack.prod.js 中使用

{
   
    test: /\.jsx?$/,
    include: [path.resolve(__dirname, "../src")],
    use<