deterministic 时默认最小 3 位数字会被 使用 chunkIds moduleIds webpack 5 webpack 4 ⻓期缓存：确定的模块 Id、chunk 和导出名称 持久化缓存 在 webpack 4 ⾥⾯，可以使⽤ cache-loader 将编译结果写⼊硬盘缓存，还可以使⽤ babel-loader，设置 option.cacheDirectory 将 babel-loader 资源加载的差异 - bundle 资源加载的差异 - bundless bundless 的冷启动时间大大缩短 bundless 的 HMR 速度不受整个项目体积影响 bundless 的单文件粒度的缓存更优 打包速度的对⽐ bundle 依赖 sourcemap bundless 调试简单 以 webpack 里面的 sourcemap 类型举例 开发体验的对⽐ ⽬ 录 CONTENTS ps://github.com/evanw/esbuild 创建 KOA Server 使用 chokidar 监听文件变化 模块解析 增加各种中间件 启动服务 文件路径：src/node/server/index.ts Vite 打包流程 - 创建构建服务 文件路径：src/node/server/index.ts Vite 会利用 serveStaticPlugin 将整个项目根目录

什么？ 查找 webpack 入口文件 在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目录 查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不 存在，就抛出错误。 实际的入口文件是：node_modules\webpack\bin\webpack.js 分析 webpack 的入口文件：webpack.js process //创建一份 webpack 配置文件 "migrate", //进行 webpack //往 webpack 配置文件中增加属 性 "remove", //往 webpack 配置文件中删除属 性 "serve",

开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 ������� ����������� 当前构建时的问题 每次构建的时候不不会清理理⽬目录，造成构建的输出⽬目录 output ⽂文件越来越多 通过 npm scripts 清理理构建⽬目录 rm -rf ./dist && webpack rimraf ./dist && webpack ⾃自动清理理构建⽬目录 module ·可以使⽤用⼿手淘的lib-flexible库 ·https://github.com/amfe/lib-flexible 资源内联的意义 代码层⾯面： 请求层⾯面：减少 HTTP ⽹网络请求数 ·⻚页⾯面框架的初始化脚本 ·上报相关打点 · css 内联避免⻚页⾯面闪动 · ⼩小图⽚片或者字体内联 (url-loader) HTML 和 JS 内联 raw-loader 内联 html