针对一个 Vue 项目，怎样通过 Webpack 配置来执行打包任务？
考察说明
考查候选人对 Webpack 在 Vue 项目中构建流程和配置的理解程度。
回答思路
- 【回答框架 1】Webpack 是静态模块打包器，Vue 项目通过 Webpack 将源码中的 JS、CSS、图片等资源按依赖关系打包成浏览器可识别的静态文件。核心概念包括入口、输出、loader、插件和模式。
- 【回答框架 2】在 Vue 项目中，通常使用 vue-loader 处理 .vue 单文件组件，将其中的模板、脚本和样式拆解并编译成 JS 模块；配合 vue-template-compiler 进行模板编译。样式相关资源通过 css-loader 和 style-loader 或 MiniCssExtractPlugin 处理。
- 【回答框架 3】打包任务的配置一般在 webpack.config.js 中定义，通过 entry 指定入口文件如 src/main.js，output 设置输出路径和文件名。开发模式使用 devServer 提供热更新，生产模式通过 mode:'production' 启用代码压缩、tree shaking 等优化。
- 【回答框架 4】实际项目中常使用 vue-cli 或 create-vue 生成的基础配置，其内部封装了 Webpack 配置，支持通过 vue.config.js 进行自定义。自定义配置时需注意 loader 的顺序和插件的作用范围。
- 【回答框架 5】执行打包任务通常通过 npm 脚本，如 npm run build 对应 webpack 或 vue-cli-service build 命令，最终生成 dist 目录，可通过 HTTP 服务器部署。
- 【关键点 1】Webpack 以入口文件为起点，通过 loader 处理和模块转换，利用插件扩展功能，最终输出打包产物。
- 【关键点 2】vue-loader 是处理 Vue 单文件组件的核心 loader，依赖 vue-template-compiler 编译模板。
- 【关键点 3】生产模式会自动启用压缩、作用域提升等优化，配置需根据模式区分。
- 【关键点 4】实际开发中通过脚手架工具简化 Webpack 配置，但理解底层原理有助于排查构建问题。
- 【易错点 1】忽略 loader 执行顺序，导致样式或文件处理错误。
- 【易错点 2】混淆 mode 配置，导致开发构建未启用 HMR 或生产未压缩。
- 【易错点 3】自定义配置时与 vue-cli 内置配置冲突，造成构建异常。