webpack资料网上一抓一大把，但是很多时候对新技术的学习速度往往赶不上技术本身的更新速度。不排除有时候费尽心思学习的却是早已被淘汰的😂。因此本文立足webpack官网。。。

涵盖：代码分割、什么是preload和prefetch、dll打包、PWA、多线程打包、runtimeChunks缓存策略优化、eslint和babel等缓存配置、oneof优化loader加载顺序等

本文适用于前端方向的同学（没错就是给自己看的😭），文章整体从 Webpack 热更新的概念、核心思想以及重点源码解析等三个方面进行阐述，希望能让大家一起对热更新有所了解。一起加油吧~🏄

什么是 sourcemap sourcemap 是关联编译后的代码和源码的，通过一个个行列号的映射。 比如编译后代码的第 3 行第 4 列，对应着源码里的第 8 行第 5 列这种，这叫做一个 mapp

1. webpack打包基本原理 1. 处理单个模块（以入口为例） 我们可以看到，入口文件index.js的所有内容都以字符串形式输出了，我们接下来可以用正则表达式或者其它一些方法，从中提取到import以及export的内容以及相应的路径文件名，来对入口文件内容进行分析，获取…

今天我主要分享的是一些 webpack 中的易混淆知识点，也是面试的常见内容。我把这些分散在文档和教程里的内容总结起来，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习

希望读过本篇文章，你在看Webpack配置的时候，能在脑中形成Chunk的生成过程。 Chunk不同于entry、 output、module这样的概念，它们对应着Webpack配置对象中的一个字段，Chunk没有单独的配置字段，但是这个词出现在CommonsChunkPlug…

前言 面试题只是一个引子，快速刷题就是背（面试官问你，但是他不一定很深入），想深入理解还是得花大量精力； webpack 的构建流程是什么 初始化参数：解析webpack配置参数，合并shell传入和

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…