项目搭建 为什么使用craco 使用create-react-app 创建的项目默认是无法修改其内部的webpack配置的，不像vue-cli那样可以通过一个配置文件修改。

craco webpack 构建速度 构建体积 thread-loader cache-loader hard-source-webpack-plugin 持久化缓存 inxlude Spl

前一段时间我把webpack源码大概读了一遍，webpack 到4.x版本后，其源码已经比较庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。 过度分析源码对于大家并没有太大的帮助。本文主要是想通过分析webpack的构建流程以及实现一个简单的webpack来让大家对we…

其他的非公共代码。 all: 不管文件是动态还是非动态载入，统一将文件分离。当页面首次载入会引入所有的包 async： 将异步加载的文件分离，首次一般不引入，到需要异步引入的组件才会引入。 initial：将异步和非异步的文件分离，如果一个文件被异步引入也被非异步引入，那它会被…

上一节，学习到通过webpack-dev-server搭配HotModuleReplacementPlugin插件可以实现不刷新页面的模块热更新。 就是webpack-dev-middleware。 可以看到重新编译了，这时候我们手动刷新下页面，即可看到修改。 以上就是webp…

上一章对webpack的配置有了简单的认识。 这一章，我需要学习的是webpack热更新，因为在开发过程中，不希望当文件更改时，人肉去编译文件，刷新浏览器。 实际操作一下。 这确实是热更新，但是这种是每一次修改会重新刷新整个页面，大家可以打开控制台查看。 显然这还是不满足不我们…

webpack是个模块打包机，无论什么资源都会被打包成模块，模块之间是有引用关系的，所以会构建一个关系依赖图，那么我们需要一个入口文件，从这个入口开始一步一步查找依赖关系，加载模块。 filename 用于输出文件的文件名。 目标输出目录 path 的绝对路径。 mode是we…

上一节我学习了webpack-dev-middleware，但是单独使用它并没有实现热更新，所以这节我要学习搭配使用webpack-hot-middleware，来实现热更新功能。 HMR- Hot Module Replacement即热更新，这已经很明白地告诉我们热更新已经…

webpack 是自动化打包解决方案，也可以理解为是一个模块打包机。它帮助我们分析项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其打包为合适的格式以供浏览器使用。 Entry：入口，Webpack…