Webpack5 核心原理与应用实践

在我们日常开发node项目的时候，通常是直接使用node命令来运行我们的项目，例如我就会使用nodemon来创建开发环境来运行我的项目，在开发完成之后我会使用一些构建工具来构建我的项目，例如webpa

在使用webpack的过程中，令我们拍案叫绝的就是它的热加载功能，可以让我们在开发过程中，实时的看到修改后的效果，而不需要手动的刷新浏览器。 这个功能是通过webpack-dev-server来实现的

网上很多关于 webpack 打包 node 的文章，但是他们都是只打包你写的 node.js 的代码， node_modules 直接都被排除了，这样处理的话如果发布到线上

tapable是官方提供的一个核心工具，不仅可以用于wepback当中，还可以使用在任何你需要的地方，webpack很多类都扩展自tapable，所以学习它对于学习webpack有很大的能帮助，文档在

插件的健壮性其实和自己写的项目类似，要排查问题，需要记录日志，分析性能瓶颈等，这些webpack都替你考虑过了， 所以会有一些工具来帮助你做这些事。

webpack和loader一样，都是webpack非常重要的组成部分，插件对比loader能做更多事情，毫不夸张的说插件可以控制整个webpack构建流程，但是同样的，他的学习成本也相当大，今天就带

webpack为loader提供了一系列的配置属性，同时也为提取这些配置属性提供了一系列的工具方法，这些东西原先并不是webpack本身就包含的，只是用的地方多了， 他就放进去了。

loader为webpack提供解析计算机文件类型能力，但是它是依赖于webpack运行的，那么它该如何调试？webpack可以同时加载多个loader，它加载的流程又是什么样的？

loader的作用就是帮webpack来识别计算机的文件，把webpack本身不识别的文件资源类型转换成webpack可以识别的js处理方式，然后再交由webpack来处理。

之前一直讲的都是提升构建性能，那么如何提高生产环境下的访问性能呢？例如首页白屏，文件过大导致加载时间过长，文件太多细碎导致http通讯次数过多降低性能，http缓存失效导致资源重新拉取等问题如

代码压缩是在不改变代码功能的情况下，尽可能的减少代码体积的过程，在 `web` 场景下可以有效减少网络传输流量，降低网络时延，提升页面启动速度的一种应用优化方案。

之前讲的是构建性能，这里是细粒度更高的性能优化，主要是还是体现在构建速度提升上，之前主要是对标生产环境，这里主要是对标开发环境。

js是一门单线程编程语言，无法完全发挥多核cpu的所有性能，那么如何在webpack中并行构建资源，完整的利用cpu的性能呢？这里带来了4个技术方案，就是下面这些，接下来就看他们有什么特性，和如何使用

缓存是现在计算机领域最常见的优化手段，作为一个前端见的最多的就是浏览器缓存，那么webpack的缓存应该是什么样的呢？一起来看看吧。

之前演示了很多示例，讲的都是`webpack`处理各种类型的文件，处理方式就是根据文件类型、输出用途来进行各种配置，这次就来讲讲这些配置背后到底有哪些门道。

在web日常开发过程中，图像是最常见的装饰器，在webpack中，图像也被提升为一等公民，够像引用普通 JavaScript 模块一样通过 `import/require` 语句导入资源模块，这种开发

使用webpack搭建electron的开发环境需要使用到那些技术？electron是怎么实现让前端人员也可以有开发桌面应用的能力的？一起来看看吧。

微前端也没什么神奇的，就是各个模块之间产生隔离，主应用远程加载子应用，各个子应用共享可以共享依赖，同时微前端与技术无关，只要是前端架构都可以使用，感兴趣一起来看看吧。

使用webpack构建一个npm包需要哪些步骤？具体npm包是长得什么样的？为什么要使用webpack进行构建？需要使用什么配置构建？一起来看看吧。

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情 历史章节 掘金课程《Webpack5 核心原理与应用实践》学习笔记 《Webpack5 核心原理与应用实践