webpack Compile： 将js编译成Bundle
HMR Server: 将热更新的文件输出给 HMR Runtime
Bundle Server： 提供文件在浏览器访问
HMR Runtime：会被注入到浏览器，更新文件变化
bundle.js : 构建输出的文件
资源内联
代码层面：
页面框架的初始化脚本
上报相关打点
css内联避免页面闪动
请求层面：
减少http网络请求数 （小图片或者字体内联（url-loader））
html和 js内联
`
raw-loader 内联html
raw-loader 内联js
`
多页面打包通用方案
1.动态获取 entry 和设置 html-webpack-plugin数量
2.利用 glob.sync
entry: glob.sync(path.join(__dirname,'./src/*/index.js'))
使用source map
1.五个关键字
eval: 使用eval包裹代码块
source map: 产生.map文件
cheap : 不包含列信息
inline 将.map作为DataURI嵌入，不单独生成 .map文件
module : 包含loader的sourcemap
webpack ssr打包存在的问题
1.浏览器的全局变量（nodejs中没有 document window）
组件适配: 将不兼容的组件根据打包环境进行适配。
请求适配： 将fetch或者 ajax发送请求的写法改成 isomorphic-fetch或者 axios。
2.样式问题（nodejs无法解析css）
方案一： 服务端打包通过ignore-loader忽略掉css的解析
方案二： 将style-loader 替换成 isomorphic-style-loader。
优化构建时命令行的显示日志
|preset|alternative|description|
|"errors-only"|none|只在发生错误时输出|
|"minimal"|none|只在发生错误或有新的编译时输出|
|"none"|false|没有输出|
|"normal"|true|标准输出|
|"verbose"|none|全部输出|
如何优化？
1.插件 friendly-errors-webpack-plugin：
success: 构建成功的日志提示
warning：构建警告的日志提示
error ： 构建报错的日志提示
2.stats设置成 errors-only
如何判断构建是否成功？
在CI/CD的 pipline 或者发布系统需要知道当前的构建状态。
每次构建完成后输入 echo $? 获取错误码
webpack4 之前的版本构建失败不会抛出错误码
nodejs中的 process.exit规范：
0表示成功完成，回调函数中err为null。
非0表示执行失败，回调函数中，err不为null， err.code就是传给exit的数字。
如何主动捕获并处理构建错误？
compiler 在每次构建结束后会触发done这个hook
process.exit主动处理构建报错