写一个自己的loader

webpack工作流程：

1、读取配置文件
2、读取入口文件
3、入口文件交给loader和plugin加工
4、按照指定出口输出
复制代码

loader本质：

loader其实就是一个方法： 传入字符串 => 处理字符串 => 输出字符串 
复制代码

实操

本次使用:

"webpack": "^4.39.2",
"webpack-cli": "^3.3.6"
复制代码

mcloader实现功能说明：

1、解析自定义test.mc文件
2、将.mc文件中的log('米虫')解析成 congsole.log('米虫')
复制代码

webpack.config.js配置

module.exports = {
  mode: 'development',
  // devtool: 'eval-source-map',
  entry: __dirname + '/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.mc$/, // 匹配.mc文件
        loaders: ['./mcloader'] // 指定loader,未发布npm，使用本地文件 
      }
    ]
  }
}
复制代码

根目录新建mcloader文件夹，里面新建index.js：

module.exports = function(code) {
  code = code.replace(/log/g, 'console.log')
  let error = null
  this.callback(error, code)
}
解释说明： 
1、每个loader都是向外暴露一个函数
2、解析时函数会接收到webpack传入的文件文本 字符串code
3、函数内部可以自定义处理字符串的过程
4、this.callback(错误信息，处理后的字符串，source-map)，如果不需要其他信息只传回处理结果可以用return code
复制代码

完

转载于:https://juejin.im/post/5d57ffab6fb9a06b1e7f38d4