webpack

比如使用一个函数，我们需要关注它的输入和输出，就可以很好的使用它。如果想更好的理解这个函数，就需要看看它内部的实现。 同样，使用Webpack，我们也需要关注它的输入和输出。 初学Webpack，我们一般都先了解输入，（源码和配置可以理解成Webpack的输入），但是不太了解输…

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

公司的旧项目仍然在使用Webpack3。提取公共代码依然使用的是CommonsChunkPlugin插件，所以需要研究一下CommonsChunkPlugin的用法。 但是官方文档的对于此插件的解释，让我感受不到这个插件的默认行为是什么，只是简单的知道它要做的事情是分离代码块。…

自Webpack4以后，代码拆分的插件由CommonsChunkPlugin变成了SplitChunksPlugin，并且不必单独引用，集成到了Webpack之中，通过配置下的optimization.splitChunks和optimization.runtimeChunk就…

大佬写的代码，当然值得一看了。 tapable源码的代码量够少，可以让我们花少量时间就能研究的明白，还能有所收获。 上一篇文章《Webpack tapable 使用研究》研究了tapable的用法，了解用法有助于我们理解源码。感兴趣可以看看。 看源码，第一感觉肯定是充满疑惑的。…

将我的研究成果，画一个简要的流程图，如果您有兴趣看完，回头再看看这个流程图。 图片里的方块中文字的序号，就是运行的顺序。 通过我们以往对tapable的了解，知道可以通过钩子来监听Tapable类相应的事件，我们做相应的处理就行了。 写插件关键的问题不是注册钩子，而是compi…

- eval配置的作用和原理。 - source-map配置的作用和原理。 - 开发环境和生产环境视情况选择devtool的值。