大力智能前端基础架构团队在为业务项目优化编译速度的过程中，对基于 webpack 的编译过程进行了研究。本文对此进行展开在源码层面讲解 webpack 的编译原理。

webpack的核心定义是一个模块打包工具。 LOADERS： 查看loader的作用，配置。（如果找不到到插件的githup上找） PLUGINS： 插件的作用，配置。（如果找不到到插件的githup上找） 首先要安装node.js以及npm， 并保证是最新版本。（最新版本会…

上一篇总览 我们介绍了 webpack 整体的编译过程，这次就来分析下基础的 Tapable。 webpack 整个编译过程中暴露出来大量的 Hook 供内部/外部插件使用，同时支持扩展各种插件，而内部处理的代码，也依赖于 Hook 和插件，这部分的功能就依赖于 Tapable…

limit属性是在文件大小超出limit的值才会单独打包，否则使用base64 的方式引用通常适用于小图片，这就是我们通常的文件处理方式。 当然从我们实际项目的测试效果来看，我只能说这种处理方式并不算是很优秀，仅供参考。 而source map是为了帮助我们定位程序出现的错误对…

前段时间，使用webpack查阅资料时发现要么是入门级文章，要么是如何优化打包速度或如何使用某个plugin、loader的文章。找不到一个在真实项目中的使用webpack的完整方案用以参考，所以花了许多精力去整合资料、查看代码和踩坑。 因此我将自己摸索的一个配置方案，分享出来…

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

在这之前我总是容易把热重载和模块热替换混淆成一个概念，在自己动手实现之后才发现两者还是有一些差别的。 保留在完全重新加载页面时丢失的应用程序状态。 然后进行手动判断进行模块热更新，如果你不想做以下判断那么可以使用module.hot.accept()，整个项目做hmr只要有代码…

自从工作之后，就已经很久没有写过博客了。时间被分割得比较碎，积累了一段时间的学习成果，才写下了这篇博客。 之前有写过 Webpack4 的文章，但是都比较偏入门，唯一的一篇实战篇 —— 基于Webpack搭建React开发环境，也是比较简单的，没有涉及到 CSS 抽取，第三方库…

babel是一个非常强大的工具，作用远不止我们平时的ES6 -> ES5语法转换这么单一。在前端进阶的道路上，了解与学习babel及其灵活的插件模式将会为前端赋予更多的可能性。 本文就是运用babel，通过编写babel插件解决了一个实际项目中的问题。 1. 遇到的问题 最近在…