Webpack
中级通用
Webpack 是模块打包工具，会沿着代码中的引用关系，把脚本和相关资源组织成可运行的产物。它解决源码分散、资源需要转换和加载安排的问题，例如把后台项目构建成供浏览器使用的文件。
你可能会说：「帮我把后台项目里分散的脚本、样式和图片处理好，生成能放到网站上运行的文件。」
动手看看构建后台商品管理页
1
点击构建后，Webpack 从配置的入口文件开始，比如后台商品页的 main.ts，而不是把整个源码目录直接搬走。
要点Webpack 怎样把源码变成可用文件？
- 1
从入口追踪模块依赖
你指定入口文件后，Webpack 会顺着导入关系找到依赖，建立模块之间的关系图。因为它知道哪些代码互相引用，所以能组织输出，而不是简单拼接整个文件夹。
- 2
用加载器和插件扩展
遇到需要转换的源码，我们可以配置加载器，例如配合 Babel 处理脚本；插件则参与更广的构建流程，例如生成网页入口。处理样式也需要相应配置，不是装好就自动完成。
- 3
产物可以按需要拆分
打包不等于把所有代码塞进一个文件。比如后台的报表页使用动态导入，Webpack 可以生成独立代码块，让用户进入该页面时再加载，减少首页需要下载的代码。
容易混淆的地方
Webpack 和 Vite 都能参与前端构建，但开发时的工作方式不同：Webpack 通常先打包，Vite 通常利用浏览器原生模块加载并按需转换。Babel 则主要负责代码转换，不负责完整的模块打包；我们可以让 Webpack 调用它。
什么时候用
适合用
- 维护已有 Webpack 配置的后台系统，需要增加资源处理规则或调整输出。
- 项目依赖特定 Webpack 插件，需要沿用它提供的构建能力。
- 复杂前端项目需要定制多入口、代码拆分和资源输出规则，团队也熟悉这套工具。
不适合用
- 只是制作一个没有构建需求的静态介绍页，直接使用 HTML、CSS 和脚本即可。
- 新建常规前端应用且没有 Webpack 专属需求，可以先选 Vite，减少配置工作。
- 只想统一代码缩进和排版，使用格式化工具即可，不需要引入打包工具。
练一练选一个答案，看看解释
你维护一个使用 Webpack 的后台，报表图表库很大，但多数用户只访问订单页。怎样更合理地减少订单页首次加载的代码？
让 AI 帮你做复制给 AI Agent 直接用
请检查这个项目现有的 Webpack 配置，保留当前构建方式，将报表页改为动态导入并拆分相关代码。说明改动涉及的依赖和配置，执行生产构建，并告诉我如何验证首页没有提前加载报表代码。