这是我参与「第五届青训营 」伴学笔记创作活动的第9天
webpack定义
资源导入/定义/配置 css、less预编译 图片资源管理
本质上一种前端资源编译、打包工具
核心流程
- 入口处理 从entry开始，启动编译
- 依赖解析
从entry文件开始，根据import/require找到依赖资源 3. 依赖解析
根据module配置，使用loader将png/css等资源转译为js内容
- 资源合并打包
将转译后的资源合并打包为js文件——chunk等部分在此实现
配置总览
流程类
- loader： babel——将高版本代码转译成低版本代码
- plugin html-webpack-plugin 生成html文件，自动引入资源(图片/css/js)
工具类
- HMR——模块热替换
hot:true 3. Tree-Shaking——按需导入module
设置生产模式和usedExports:true
loader插件
核心功能：将非标准js资源，设计出资源翻译模块 特点：
-
loader插件链式调用，从右到左，从下到上
首先使用less-loader=>css，将css包装成符合js的语法 最后使用style-loader将css模块包进require语句，将内容注入到style标签
-
异步调用
自定义loader
loader收集context，对文本进行解析
常用loader
思考题
loader如何抛出异常
file-loader中的异常,通过new Error()创建异常，throw抛出
export default function loader(content) {
if (!this.emitFile)
throw new Error('File Loader\n\nemitFile is required from module system');
const options = loaderUtils.getOptions(this) || {};
validateOptions(schema, options, 'File Loader');
}
插件
插件精髓：对扩展开放，对修改封闭 只做主流，细节根据 通过 钩子函数实现
需要掌握常见的用法
自己之前的一些笔记：
处理资源
根据不同扩展名，使用不同的加载器(file-loader)方式将其替换名称，输出到相应位置——处理文件导入地址并替换成其访问地址，并把文件输出到相应位置 在此过程中，可以使用generator方式，筛选图片大小，进行base64处理
插件plugin：
处理语法错误：Eslimt 处理es6语法兼容问题（箭头函数）:babel 自动导入js文件：HtmlWebpackPlugin，需要添加模板，
插件需要require引入，new出来
Cache
对Eslint和Babel编译结果进行缓存：
优化代码性能
- codeSplit——分开加载
- 对多个包的代码分别打包
- 提取公共代码
- 按需加载——通过js代码import动态导入
- Preload/ Prefetch——预加载
共同点 Preload：告诉浏览器立即加载资源。 Prefetch：告诉浏览器在空闲时才开始加载资源。
区别： Preload加载优先级高，Prefetch加载优先级低。 Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。
- Network Cache——生成唯一hash 文件变了——hash要变 文件不变——hash不变
不同hash：
- fullhash（webpack4 是 hash） 每次修改任何一个文件，所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。
- chunkhash 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。我们 js 和 css 是同一个引入，会共享一个 hash 值。
- contenthash 根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的。
将 hash 值单独保管在一个 runtime 文件中。 runtime 文件只保存文件的 hash 值和它们与文件关系，整个文件体积就比较小，所以变化重新请求的代价也小。
- Core-js js兼容性处理
- PWA ——离线体验
