getOptions(this); }; loader 异常处理 loader 内直接通过 throw 抛出 通过 this.callback 传递错误 this.callback( err: Error | null, content: string | Buffer, sourceMap?: SourceMap, meta?: any ); loader 的异步处理 通过 this.async 来返回一个异步函数 来返回一个异步函数 ·第一个参数是 Error，第二个参数是处理的结果 module.exports = function(input) { const callback = this.async(); // No callback -> return synchronous results // if (callback) { ... } callback(null, input console.log('Hello World!'); }); } } module.exports = MyPlugin; 插件名称 插件上的 apply 方法 插件的 hooks 插件处理逻辑 ······························ ···· ······························ ··· · ················

style-loader 替换成 isomorphic-style-loader 如何解决样式不不显示的问题？ 使⽤用打包出来的浏览器器端 html 为模板 设置占位符，动态插⼊入组件 ⾸首屏数据如何处理理？ 服务端获取数据 替换占位符 当前构建时的⽇日志显示 展示⼀一⼤大堆⽇日志，很多并不不需要开发者关注 统计信息 stats 如何优化命令⾏行行的构建⽇日志 module.exports 或者发布系统需要知道当前构建状态 构建异常和中断处理理 webpack4 之前的版本构建失败不不会抛出错误码 (error code) Node.js 中的 process.exit 规范 · 0 表示成功完成，回调函数中，err 为 null · ⾮非 0 表示执⾏行行失败，回调函数中，err 不不为 null，err.code 就是传给 exit 的数字 如何主动捕获并处理理构建错误？ plugins: log('build error'); process.exit(1); } }) } ] compiler 在每次构建结束后会触发 done 这 个 hook process.exit 主动处理理构建报错 ������� �����������

serveStaticPlugin 利用 koa-etag 中间件打 etag devServer 具备静态文件服务功能 Vite 打包流程 – 静态⽂件托管服务 文件路径：src/node/server/index.ts 处理裸导⼊（bare import）的模块路径，eg: import react from 'react'; 浏览器（只有相对路径和绝对路径）无法识别，因 此需要重写模块路径 Vite 打包流程 t=1599124870589’ Vite 打包流程 – 重写模块路径 浏览器不支持 JS 中直接写 import CSS、图片、JSON 等语法。 回顾一下 webpack loader 的处理策略： • CSS：转换成 js 的模块，执行模块会在 DOM 中创建