webpack babel - Githubissues

hmr

1、webpack 的 watch 模式下，文件修改会被重新打包通过js对象存在内存中，并生成hash。
2、WDS websocket 建立浏览器与本地服务器wds的全双工通信，并且修改entry配置将ws代码打进bundle中发送到浏览器端。
3、WDS 由于注册了监听事件，编译结束通过websocket通知浏览器hash和ok。
4、HMR 资源对比，客户端向wds发起ajax获取需要更新的文件列表和hash。
5、HMR 最后客户端通过jsonp请求拿到最新文件。
6、HMR 根据新模块代码判断热更新还是reload

babel

parse -> ast 词法分析语法分析
transform -> 遍历 ast -> ast
generate -> 字符串代码

babel 插件编写访问者模式是一个对象，定义了用于在一个树中获取具体节点的方法。

const MyVisitor = {
  // 遇到 Identifier 节点就调用
  Identifier() {
    console.log("Called!");
  }
};

路径 path 连接两个节点，访问者访问到的是 path path上有很多方法

插件顺序前往后排列。预设（插件组合）后往前。插件在 Presets 前运行。

webpack 插件 webpack 事件流依赖于 tapable tapable 暴露了很多 hook基类，可以在实例上面通过tap注册事件，通过call调用。 webpack会暴露compiler核心基类，提供给开发者各个生命周期钩子，插件通过钩子注册相应的事件来改变webpack输出结果。

一个插件是一个类，提供了apply方法，apply方法会被webpack调用并传入compiler对象。我们可以通过在compiler的钩子上面注册事件并拿到compilation进行其他操作。

class Plugins () {
  apply (compiler) {
    compiler.hooks.emit.tap('xxx', (compilation) => {
      xxx
    })
  }
}

vue-loader 一个 webpack loader 解析 .vue 文件 css scope 1、selector解析.vue生成一个对象parts包含template、style、script 实际是调用vue的parse方法 2、style-compiler 交给webpack的样式loader处理，postcss-loader， scoped 的实现是添加data属性 3、babel-loader 根据lang属性解析js js也是交给webpack对应的loader

webpack 优化

speed-measure-webpack-plugin 分析 loader 和 plugin 打包速度
webpack-analyzer-plugin 分析打包结果组件库三方库 vant 和 lodash 注意按需导入，vscode 安装 import cost 时刻关注导入包的大小

1、最基本的配置 loader 解析的文件匹配 exclude include 筛选。例如 babel-loader 只解析 src 目录的 js ts 文件

2、cache-loader 缓存打包结果。babel-loader 通过 cacheDirector 配置。

3、happypack 针对复杂项目多进程打包。注意进程管理也需要消耗时间。

4、uglifyjs-webpack-plugin image-loader extract-text-webpack-plugin 资源压缩静态资源 publicPath CDN 引入

5、extract-text-webpack-plugin css分包

6、external 为 webpack 打包注入全局变量，例如 jq，不加入打包里面，使用 cdn 引入

7、自带的 tree-shaking 只针对 es6 模块

8、optimization splitChunks 多页面分包优化 vendors: 三方库 vue vue-router commom: 公共js minChunks: 2 // 最少引入两次根据页面动态配置 getPage() / 3

zhangzheng-zz / blog

webpack babel #21

webpack 优化