webpack作用
- 打包文件
- 转译代码 ( ES6 转译为 ES5，SCSS 转译为 css、、)
- 构建build
- 代码分析
- 代码压缩
进入 webpack 官网安装 webpack, CRM 操作解决。
文件名中的 hash 用途
- 用作缓存
filename: '[name].[contenthash].js'
为什么不设置确定的文件名？
先了解一下缓存：
HTTP 响应头中的 Cache-Control
cache-control: public, max-age=31536000
当第一次访问某宝首页，会下载一个 index.html 文件，文件会引入 css、scss、js、jpg、、等文件。浏览器默认记住加载了哪些文件即缓存，且设置了以上内容：公共缓存且缓存有效时间。
1年内再次访问该首页时，只需要下载 index.html 文件，将会直接从缓存中读取相同的文件。此时访问速度加快。
既然缓存时间是确定的，若 A 文件内容修改后如何更新页面中对应的缓存 A 呢？
如何更新 A 缓存
- 在 webpack.config.js 中设置缓存文件名为以上的 hash 形式
- 每次更新 build 后 缓存名都不一样
- 浏览器看到缓存名不同将会重新请求
- 实现了内容改变文件名也改变，页面同步更新。
- 若文件名设置为确定的，当修改文件的内容(背景颜色)，访问页面时想要看到变化的背景只能等一年后。
为什么 html 不缓存
- 无法通知浏览器其它的文件已经更新
- css更新后文件名也更新，浏览器通过 index.html 访问更新过的css ,若首页也更新了，则无法访问 css 、js等文件更新的内容。
webpack-dev-server
每次修改完代码得进入 dist 目录，开启 http-server 服务才能看到浏览器效果，更改代码还得返回 src 目录去 build ，如何优化？
- webpack-dev-server 可以用来快速开发
- 将 mode 设置为 deveploment 开发模式
- CRM 操作
- 实现代码与页面同步更新
- 读取 index.js 的内容,转译成可以运行的js,不放在硬盘中，直接在内存修改
- 开发不依赖 dist 文件，也不会生成 dist 目录
loader 与 plugin的区别
loader : 加载器
- 用来 loader 文件
- 譬如：bable-loader 用来加载 js 文件，把高级 js 变成低版本浏览器可以支持的 js
- css-loader 和 style-loader 用来加载 css 文件,把 css 代码转化为页面中的 style 标签
- scss-loader 将 scss 代码转化为 css 代码
- css-loader 将 css 代码转化为 js 字符串
- style-loader 将 js 字符串转化为 style 标签
- file-loader 将文件转化为文件路径
plugin :插件
- 扩展 webpack 功能
- 譬如：html-webpack-plugin 插件用来生成一个 html 文件
- mini-css-extract-plugin 插件 将 1~n 个 css 文件合并成一个 css 文件
如何做懒加载
由于某个 js 体积大，目前没有必要加载，等到需要时再加载就叫做懒加载。
- A 文件里写一个函数并导出
- 用 import() 去加载这个文件，会得到一个 promise 对象，
- promise.then方法第一个参数写成功的操作,第二个参数写失败的操作
