2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…

本文以剖析webpack-dev-server源码，从零开始实现一个webpack热更新HMR，深入了解webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware的实现机制，彻底搞懂他们的原理，在面试过程中这…

webpack4出了两个月，发现大家包括我对splitChunk的使用都还是在摸索阶段。我也看了挺多别人的配置demo，都觉得不太满意或者没得到太好的解惑，issue 下面的问题也没什么人回复，只能自己操作了，顺便记录下来，如果大家有更好的，欢迎评论区留下地址。 maxAsyn…

在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了4以后，内置了一个一模一样的功能，而且起了一个好听的名字叫“优化” 好了，就写到这里吧，想必大家也看累了吧，辛苦大家了，哈哈。

随着2018年2月15号webpack4.0.0出来已经有一段时间了，webpack依靠着“零配置”，“最高可提升98%的速度”成功吸粉无数，对于饱受项目打包时间过长的我，无疑是看到了曙光，于是决定开始试水。 随着项目的不断迭代，样式文件和js文件的数量越来越多，造成webpa…

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

如果你还有兴趣，那就一起来看看吧。 首先弄明白chunk是什么东西：webpack将多个模块打包之后的代码集合称为chunk。 entry chunk: 含有webpack runtime代码的模块代码集合。 normal chunk：不含runtime代码的模块集合。 ini…

使用webpack4提升180%编译速度

随着单页应用发展的越来越庞大，拆分js就是第一要务，拆分后的js，就可以根据我们需求来有选择性的加载了。 这里就添加了一句，chunkFilename而已，chunkFilename的作用就是用来给拆分后的chunk们起名字的配置项。 还是只打包出了一个main.js，毫无变化…