Vue3高级-第十八篇：Vue3 项目的高级构建优化

Vue3高级-第十八篇：Vue3 项目的高级构建优化

1. Webpack 深度配置与优化

深入理解 Vue3 项目中 Webpack 的配置原理与流程

在 Vue3 项目中，Webpack 充当着构建工具的核心角色，负责将各种类型的源文件（如 .vue、.js、.css 等）转换为可在浏览器中运行的静态资源。

• 配置原理：Webpack 通过一个配置文件（通常是 webpack.config.js）来确定如何处理项目中的各种文件。这个配置文件本质上是一个 JavaScript 模块，它导出一个包含众多配置选项的对象。例如，entry 选项指定了构建的入口文件，Webpack 会从这个入口开始，递归地解析模块之间的依赖关系，构建出一个依赖图。output 选项则定义了输出文件的路径和名称等信息。

const path = require(