手写webpack中的loader、plugin以及babel转码的简单理解

loader

onst myLoader = function(source) {
  const result = source.replace(/second page000111/g, "我被Loader替换了！！！！");
  return result;
}

module.exports = myLoader;

// 使用方法：
在webpack.config.js
module:{
    rules: [
        {
          test: /\.js$/, // 匹配所有的 .js 文件
          use: path.resolve(__dirname, './src/MyWebpackLoader.js') // 使用你创建的 loader
       }
    ]
  }

plugin

class MyWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap('MyWebpackPlugin', (compilation) => {
        console.log('Webpack 构建开始！');
      });
   
    // 在编译完成且资源即将被写入磁盘之前执行
    compiler.hooks.emit.tapAsync('MyWebpackPlugin', (compilation, callback) => {
        console.log('Webpack 构建完成，资源即将写入磁盘！');
        setTimeout(() => {
          callback();
        }, 100); // 延迟100毫秒
    });
   
    compiler.hooks.done.tap('MyWebpackPlugin', (stats) => {
      console.log('MyWebpackPlugin: 编译完成');
    });
  }
}

module.exports = MyWebpackPlugin;

// 使用方法
在webpack.config.js
plugins:[
    new MyWebpackPlugin()
]

babel转码原理：

解析：将ES6代码块转成AST抽象语法树

转译：遍历AST抽象语法树,根据预设或者插件的规则，将ES6语法转化为等效的ES5语法

生成：将转换后的AST转换生成ES5代码