去年接触了公司内一个开发运行了两年多的项目，整体应用是基于 React 技术栈的，多个单页应用有构成了多页应用。可以理解为比较独立的子业务之间是 MPA 形式跳转，而子业务内部则是 SPA 形式。 本地开发环境下，代码改动后的热更新（增量编译）需要大概 10～20s 的时间，使…

多app打包的意思是：多个模块单独打包，模块之间的资源互相不依赖，某一模块的资源打包在该模块下。这是和多页面最不大的不同，打包资源再多页面之间其实是公用的，bundle包资源也具有相互依赖的特征 这里不具体讲述修改的代码细节了，值只贴一下关键代码。 其它详细配置这里不多说了，详…

本篇所有代码线上代码react-webpack4-cook,翻译过来叫：webpack4和react的乱炖，可以跟着代码进行配置，之前有很多坑，线上代码都已经被解决了 。如果对您有帮助，不妨给个star.点赞关注不迷路 一篇文章不写前言总感觉不太正式，大概介绍下我是怎么完成一个…

项目打包时间长，原因无外乎就是项目整体比较庞大、依赖复杂、组件之前拆分不够合理。 依赖关系复杂，这里说的是项目中的依赖模块比较多，像我们现在这个项目，光算依赖包的话就有40+，另外一个重要原因就是组件之间存在相同引用的依赖。解决思路是把项目中重用的依赖抽离出来进行单独打包。 组…

有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装依赖就没有了。一般常用…

最近新起了一个多页项目，之前都未使用 webpack4，于是准备上手实践一下。这篇文章主要就是一些配置介绍，对于正准备使用 webpack4 的同学，可以做一些参考。 webpack4 相比之前的 2 与 3，改变很大。最主要的一点是很多配置已经内置，使得 webpack 能“…

webpack给前端开发带来了毋庸置疑的改变，它把JS，图片，css都作为模块处理，同时具有开发便捷，自动化，兼容AMD写法等等诸多无须赘述的优点，更令人称道的是其插件社区非常强大，对于不同的业务需求和技术需求社区都有大量插件可供使用。 凡事都具有两面性，许多人说：前端开发再也不…

0. 背景 随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的…

通常，js代码出错，控制台会提示第几行第几列代码出错。但是webpack打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。 sourceMap就可以解决这个问题。sourceMap就是一个信息文件，里面储存着打包前的位置信…