速度不受整个项目体积影响 bundless 的单文件粒度的缓存更优 打包速度的对⽐ bundle 依赖 sourcemap bundless 调试简单 以 webpack 里面的 sourcemap 类型举例 开发体验的对⽐ ⽬ 录 CONTENTS webpack 5 新特性解析 01 bundle 和 bundless 的差异 02 Vite 的构建原理 03 Vite 构建速度快的原因 development.js" 相对路径转绝对路径，方便浏览器请求。 补齐文件扩展名和经常被省略的 index.xxx 如：import a from ’/src/a/index.js’ 给非 js 类型（js 类型：如 js(x)/ts(x)/vue）的文件地址加上 一个叫 “import” 的 query 参数。 如：import ‘/src/style.css?import’ 给 hmr 相关的请求地址添加时间戳，避免缓存。

__dirname + '/dist' } }; 通过占位符确保⽂文件名称的唯⼀一 核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的 Loaders 有哪些？ Loaders 的⽤用法

"css-loader", "sass-loader" ], }, ] }, }; 多⻚页⾯面应⽤用(MPA)概念 每⼀一次⻚页⾯面跳转的时候，后台服务器器都会给返回⼀一个新的 html ⽂文档， 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多⻚页应⽤用。 多⻚页⾯面打包基本思路路 module.exports = { entry: { index: './src/index.js', search: 使⽤用eval包裹模块代码 cheap: 不不包含列列信息 inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件 module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ·⽅方法：使⽤用 html-webpack- externals-plugin

EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着 webpack 的插件系统。 Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子 Tapable hooks 类型 Tapable 的使用 -new Hook 新建钩子 Tapable 暴露出来的都是类方法，new 一个类方法获得我们需要的钩子 class 接受数组参数 options ，非必传。类方法会根据传参，接受同样数量的参数。

function (event) { console.log(event); /* 当修改 src/js/log.js 文件时 event { // 发生改变的类型，不管是添加，改变或是删除 type: 'changed', // 触发事件的文件路径 path: '/Users/nimojs/Documents