loader和plugin

loader是文件加载器，主要是加载资源文件，对指定的文件进行编译或者压缩等等，最后把相关文件打包到项目中，比如scss转化成css
plugin是webpack插件，webpack生命周期中有许多事件，plugin可以根据webpack提供的事件api转变输出结果
loader主要是打包文件，plugin是扩展webpack功能

webpack

  1. 读取webpack的配置参数；
  2. 启动webpack，创建Compiler对象并开始解析项目；
  3. 从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树；
  4. 对不同文件类型的依赖模块文件使用对应的Loader进行编译，最终转为Javascript文件；
  5. 整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。

    浏览器兼容

    1.autoprefixer
    2.不同浏览器默认边距不同，Normalize.css插件可以清除样式
    3.ie6浮动边双倍边距,使用padding代替margin
    4.ie6块元素有默认高度
    5.ie9没opacity
    6.cursor兼容问题
    7.firefox ul默认有padding ie默认有padding值
    8.ie li不设置line-height会有排版错误
    9.ul li浮动后显示在div外 清除浮动即可
    10.chrome中字体不能小于10px transform:scale(0.8)

    webpack热更新原理

    Webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
    HMR的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。
    后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
    细节请参考Webpack HMR 原理解析

    webpack对比vite

    webpack会先打包构建整个应用，然后启动开发服务器，请求服务器时直接给予打包结果

vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。

Vite 的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器,Vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多
比如：浏览器就会像服务器发起一个GET http://localhost:3000/src/main.js
请求main.js文件： // /src/main.js: import { createApp } from ‘vue’ import App from ‘./App.vue’ createApp(App).mount(‘#app’)
浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的 import 引用发起 HTTP 请求获取模块的内容文件，如：GET http://localhost:3000/@modules/vue.js 如：GET http://localhost:3000/src/App.vue

由于vite在启动的时候不需要打包构建整个应用，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。

在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可
webpack需要先chunk diff,然后把该模块的相关依赖模块全部编译一次

当需要打包到生产环境时，vite使用传统的rollup（也可以自己手动安装webpack来）进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS 。