「万字解析」详解 Tapable 核心工作机制，Webpack Plugin 必备前置知识解读。从原理玩转 Webpack ，真正精通所谓工程化前端。

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…

webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中。什么是loader

本文以剖析webpack-dev-server源码，从零开始实现一个webpack热更新HMR，深入了解webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware的实现机制，彻底搞懂他们的原理，在面试过程中这…

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

PWA 是前端的未来，也是已经到达的未来。本文的内容，将会从搭建一个基于 webpack 的工程开始，介绍 webpack 相关的知识，同时引入 PWA 的概念，逐步把这个工程打造成一个完整的 PWA 应用，并最终部署上线。

目前所有的webpack配置信息都是放到一个配置文件中，当配置越来越多时，这个文件会变得越来越不容易维护。所以，我们最好对配置进行拆分。同样为了提升加载效率，打包后的文件也需要进行拆分操作。

这是我参与更文挑战的第6天，活动详情查看： 更文挑战 前言 在前面的文章里，我们已经可以通过 js 进行 import 各种资源。现在还有个问题，就是需要将 es6+ 代码需要转换为 es5 和添加

当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时才开始加载，这就是按需加载。要实现按需加载，我们一般想到的方法：动态创建script标签，并将src属性指向对应的文件路径。但是在实现过程中，存在下面问题： ​ webpcak 的按需加载已经完美解决了上述问题…