说说你对webpack的理解？解决了什么问题？

说说webpack的构建流程?

说说webpack中常见的Loader？解决了什么问题？

说说webpack中常见的Plugin？解决了什么问题？

说说Loader和Plugin的区别？编写Loader，Plugin的思路？

实现loader的模板如下：

// 导出一个函数，source为webpack传递给loader的文件源内容
module.exports = function(source) {
    const content = doSomeThing2JsString(source);
    
    // 如果 loader 配置了 options 对象，那么this.query将指向 options
    const options = this.query;
    
    // 可以用作解析其他模块路径的上下文
    console.log('this.context');
    
    /*
     * this.callback 参数：
     * error：Error | null，当 loader 出错时向外抛出一个 error
     * content：String | Buffer，经过 loader 编译后需要导出的内容
     * sourceMap：为方便调试生成的编译后内容的 source map
     * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，进而省去重复生成 AST 的过程
     */
    this.callback(null, content); // 异步
    return content; // 同步
}

实现plugin的模板如下：

class MyPlugin {
    // Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply (compiler) {
    // 找到合适的事件钩子，实现自己的插件功能
    compiler.hooks.emit.tap('MyPlugin', compilation => {
        // compilation: 当前打包构建流程的上下文
        console.log(compilation);
        
        // do something...
    })
  }
}

说说webpack的热更新是如何做到的？原理是什么？

说说webpack proxy工作原理？为什么能解决跨域?

说说如何借助webpack来优化前端性能？

如何提高webpack的构建速度？

与webpack类似的工具还有哪些？区别？

（图片需要右击，选择在新标签页打开图像，放大了看）