第10章 webpack 和 babel
1. 拆分配置和merge 【webpack5用merge】
const { merge } = require('webpack-merge')
开发环境的config里都不需要output，配devServer就好了
2. 启动本地服务 --config 是指定配置文件
开发环境启动本地服务用webpack-dev-server
生产环境打包用webpack
3. 处理ES6
4. 样式处理（开发环境）
5. 图片处理
开发环境 直接引入url file-loader
生产环境 小图片设置base64 url-loader
-
使用 base64 编码的图片可以减少 HTTP请求次数，从而提高页面加载速度。因为浏览器在请求图片时需要先发送一个 HTTP 请求，然后等待服务器响应，这个过程可能会消耗较长的时间，影响用户体验。而使用 base64 编码可以将图片嵌入到 HTML、CSS 或 JavaScript 中，这样就不需要再发送请求，也就相当于减少了响应时间，可以提高页面的加载速度。
-
另外，使用 base64 编码可以减少静态资源文件的数量，从而降低了项目的复杂度和维护成本。不过需要注意的是，使用 base64 编码的图片会增加 JavaScript 文件的大小，可能会对性能产生一定的负面影响。同时，由于 base64 编码后的文本比原始二进制数据大约多 1/3，因此对于较大的图片，不适合使用 base64 编码。
1. webpack如何配置多入口
name即对应entry的name
2. webpack抽离压缩css文件
- 开发环境
development的css直接用style-loader嵌入style标签里 - 生产环境
production下的css不能直接嵌入style标签里
3. Webpack抽离公共代码和第三方代码
开发环境无所谓，我想赶快运行，不用怎么优化压缩
生产环境就需要压缩优化了
第三方代码几乎是不变的，抽出来以后命中缓存就不用频繁随着变化而重新打包
注意htmlPlugin里的chunks要考虑代码分割的引入
4. 懒加载
异步加载的代码也会单独打个包
5. 处理JSX
6. 处理Vue
module chunk bundle 区别
webpack一切皆模块，不管是图片，还是js，csschunk就是webpack从entry入口文件开始做依赖的分析，再加上代码分割处理出来的模块集合。（webpack分析过程中的概念）- 一般一个
chunk对应一个bundle
webpack性能优化
- 优化打包构建速度–开发体验和效率
- 优化产出代码–产品性能
- 其他：contenthash命中缓存等
1. 优化babel-loader
ES6代码没有改的，就不会重新编译，命中缓存（非固定：开发环境这么写，生产环境则用happypack它们）
2. IgnorePlugin避免引入无用模块
忽略自动引入的所有语言包
手动引入需要的语言包
3. NoParse避免重复打包
4. happyPack多进程打包
可以写到common里，也可以只在生产环境使用，但压缩代码ParallelUglifyPlugin的东西要写在生产环境上，开发时没必要压缩。
5. ParallelUglifyPlugin
多进程优化要按需使用
6. 自动刷新 了解就好
7. webpack热更新 【按需使用】
自动更新：内存全部清空，比如表单刚填入的东西一刷新就没了，SPA页面到比较深的路由里一刷新也回到首页了
自己定义哪些模块会触发热更新
8. DllPlugin动态链接库插件 【知道】
webpack优化产出代码
1. mode:production
2. Scope Hosting 后面再看吧
20-21 - 20-23 babel相关概念
面试真题
前端为何要进行打包和构建？
针对代码开发来说
前端工程化
