笔者两年前曾写过一篇文章《Webpack4 搭建 Vue 项目》，后来随着 webpack5 和 vue3 的面世，一直想升级下我这个 createVue 项目。

前言 作为一个前端工程师，前端工程化这个词不绝于耳，而Webpack在前端工程化中扮演着至关重要的角色。 要明白webpack为什么重要，就要知道它为什么出现，解决了什么问题。 前端模块化从文件划分模

一、目标二、对比常见的在线图片压缩工具三、webpack图片压缩plugin四、gulp图片压缩plugin五、其它图片压缩相关工具六、基于webpack的图片压缩插件测试七、Demo体验我们选择常用

本篇将从优化开发体验、加快编译速度、减小打包体积、加快加载速度 4 个角度出发，介绍如何对 webpack 项目进行优化。

实现webpack打包优化，有两个优化点： 如何减少打包时间 如何减少打包大小 减少打包时间 优化Loader 对于Loader来说，首先优化的当是babel了，babel会将代码转成字符串并生成AS

先简单总结一下，优化Webpack打包可以通过多种方式来提高性能和减小文件大小。以下是一些常见的优化技巧： 代码分割（Code Splitting）：将代码拆分成多个小块，使得在加载页面时只加载必要的

名词解释 Chunk: 由 modules 集合 + modules 加载后会执行的方法 组成 ，可理解为 构建输出的 js 产物。 Each chunk has a corresponding **

这篇文章主要介绍了Webpack的代码分割功能。它详细解释了代码分割的原理,并通过一个完整的例子演示了如何在项目中实现代码分割。文章还深入分析了SplitChunksPlugin的源码,阐明了其工作流

关于 Webpack 在讲 Plugin 之前，我们先来了解下Webpack。本质上，Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。它能够解析我们的代码，生成对应的依