基础配置
1. entry入口， 从哪个文件开始打包
2. output 输出， 输出哪里去
3. loader 加载器 (webpack只能处理js、json等资源 其他（处理样式，处理图片）资源需要借助loader，webpack才能解析, babel-loader两个作用, es6=>es5, jsx=>js)
4. plugin 插件 （扩展webpack功能， html模板， eslint）
5. 开发模式 （让代码编译自动化运行）， 生产模式（代码编译优化输出， 压缩js代码）
6. devserver 配置（自定编译，自定刷新）
7. webpack 脚本指令用法 webpack 直接打包输出， webpack serve 启动开发服务器，内存编译打包，没有输出
高级配置
对webpack优化， 代码在编译时、运行时性能更好 => 提升开发体验, 提升打包构建速度, 减少代码体积, 优化待代码运行性能
1. sourceMap (源代码映射)
用来生成源代码与构建后代码=>映射的文件方案
里面包含源代码和构建代码每一行, 每一列映射关系, 构建后代码出错, 从出错位置找到映射后源代码的位置, 让浏览器提示源代码出错位置, 找到错误根源
2. 热更新
在程序运行中, 替换,添加,删除模块, 而无需重新加载整个页面= >webpack5默认配置
开发模式下, 只会更新修改的模块, style支持, js默认不支持, module.hot.accept('./js'), => vue-loader, react-loader
3. oneof 每个文件只能被一个loader处理
每种文件,只有一种loader处理, 找打对应loader之后就不需要在查找,
4. include, exclude
5. cache缓存之前的eslint 和babel
6. 多进程打包
面对js文件主要就是eslint, babel, Thead 三个工具, 提升它的运行速度
npm i thread-loader -D
7. treeShaking 移除js中没有使用的代码 ESmodule 默认开启
8. 本地加载的图片进行压缩
npm i image-minimizer-webpack-plugin imagemin -D
9. codesplit 代码分割
分割文件, 生成多个js文件, 按需加载, 需要哪个用哪个
10 preload 告诉浏览器立即加载资源 / prefetch 告诉浏览器在空闲时加载资源
共同点: 都会加载资源, 并不执行, 都有缓存
区别: preload优先级高, 只能加载当前页面需要的资源, prefetch可以加载下一个页面的资源
总结: 当前页面优先级搞得资源使用preload加载, 下一个页面需要使用的资源用prefetch, 兼容性差,
11. core-js
babel处理箭头函数,但是async promise没法处理, 专门做es6以上的api的补丁,让我们在不兼容某些新特新下的浏览器下使用
12. PWA 渐进式网络应用程序
项目一旦处于网络离线情况, 就没法访问, 提供一种类似原生应用程序, 体验的web app技术, 在离线时也能够继续运行, 内部通过service workers技术实现
