使用webpack4提升180%编译速度

最近学习了webpack4的使用，并尝试了对项目webpack进行升级和优化，记录一下此次升级的一些实践过程。 项目在2016年引入了webpack作为打包工具，并使用vue-cli搭建build相关的代码，之后再无较大更新。随着项目迭代至今，代码量早已不是当年寥寥的几千行，本…

但是 tapable 2.0.0-beta 版本的重构，犹如艺术品一般，让人惊艳。源码内部采用 getter 惰性加载与缓存的方式，以及利用 new Function 去消除递归调用。 消除递归调用的方式就是在第一次调用 call 的时候，通过字符串拼接可执行的字符串代码（源码…

通常我们的项目会有开发环境和生产环境，而开发环境我们配置的目标是构建更快，模块热替换，能从chrome控制台报错信息对应的源码的错误处(source map)等。生产环境我们更加关注chunk分离，缓存，安全，tree shaking等优化点。 当然对于开发和生产环境的配置文件…

Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。 而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类Tapable。 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 Compiler、Com…

1. 1 什么是WebPack webpack 是一个现代 JavaScript 应用程序的静态模块打包工具：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并生成一个或多个 bundl…

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

技术：好的，这就改。 这种方案，很快就被自我否定了。 这种方案，也思索了很久，后来也被否定了。 经过前面两个问题后，我发现思考的方向完全是错误的，总是妄想改变webpack的打包方式，简直就是跟它的理念对着干。 可以看到这一次生成的hash是4897.... 但是输出的每个文件…

webpack 多页应用配置的基本思路是采用多入口配置，然后多次调用 html-webpack-plugin 来生成 html 文件。 可以发现，每个 html 中已经以 script 标签的形式插入了对应的 js 文件。 由于每增加一个页面，都需要手动的添加 entry 和 …