在前面几个部分的学习后，我们知道了如何通过 webpack 打包文件，并根据不同环境独立出相应的配置文件。但，我们不能满足于能打包出文件就可以了，还应该思考怎么打包出更优的文件。比如，我们都知道浏览器有强缓存与协商缓存，如果能够让不变的文件得到有效缓存，变动的文件得到及时更新，这样就能在性能上有所提升。

在上一节中，我们知道了如何让 webpack 自动构建，并刷新浏览器。但是，有个问题，它会刷新整个页面，哪怕我只改动了一小部分，它也会刷新整个页面，重新加载全部资源，如果项目比较大，无疑会影响我们的开发效率。那有没有什么办法能够让 webpack 做到，只更新变更内容，没改的地方不动；而且还要保存当前状态？有，它就是 HMR 模块热替换 。

在上一节中，复习了 webpack 四个基本概念：entry、output、loader、plugins，知道了 webpack 基本的打包怎么配置。但是有个问题，就是每次修改文件后，想要看实际效果，需要每次都去执行 webpack 或者 npm run build 命令，然后打开 index.html 看效果，比较麻烦。今天，就来看看，如何让 webpack 自动构建。

webpack 是一个 js 静态模块打包器。当 webpack 处理应用程序时，它会递归构建一个依赖关系图，该图映射项目中所用到的每个依赖模块，并将他们打包成一个或多个 bundle。今天我们就来聊聊 webpack 的 四个核心基本概念：entry、output、loader、plugins。