webpack 配置 symfony 前端打包需使用官方封装的 webpack encore：安装 encore-bundle 和 @symfony/webpack-encore，运行 npx webpack-encore init 初始化；关键配置包括 setoutputpath('public/build/')、setpublicpath('/build')、addentry() 和 enablesassloader()/enablepostcssloader()；开发用 npm run watch，生产用 npm run build:production；twig 中必须通过 {{ asset() }} 引用资源以支持版本哈希。
Webpack 配置 Symfony 前端打包，核心是用好 Webpack Encore——它不是直接配原生 Webpack，而是 Symfony 官方封装的简化层，屏蔽复杂性，专注项目实际需求。
基础安装与初始化
先确保项目已启用 Node.js 环境和 npm/yarn：
- 安装 Encore Bundle（PHP 侧）：
composer require symfony/webpack-encore-bundle - 安装前端依赖：
npm install @symfony/webpack-encore --save-dev - 生成默认配置文件：
npx webpack-encore init，会创建webpack.config.js和assets/目录结构
关键配置项说明
webpack.config.js 是主控文件，几处必须设对：
-
输出路径：
.setOutputPath('public/build/')—— 构建产物存到public/build，Symfony 能直接通过 Web 服务器访问 -
公共路径：
.setPublicPath('/build')—— Twig 中调用{{ asset('js/app.js') }}时，会拼成/build/js/app.js。若部署在子目录（如/myapp/），这里要改成/myapp/build -
入口文件：
.addEntry('app', './assets/js/app.js')—— 指定 JS 主入口；可追加多个，如.addEntry('admin', './assets/js/admin.js') -
样式预处理：启用 Sass 或 PostCSS，例如
.enableSassLoader()或.enablePostCssLoader() -
生产优化：
.enableVersioning(Encore.isProduction())开启哈希文件名，配合asset.yaml中的json_manifest_path实现缓存自动失效
开发与构建命令
日常使用这些 npm 脚本（定义在 package.json 的 scripts 区）：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
npm run watch—— 启动监听，文件变动自动重编译，支持 source map -
npm run build—— 一次性构建（开发环境） -
npm run build -- --mode=production或npm run build:production—— 生产构建，压缩、哈希、分离 vendor
注意：无需手动启动 webpack-dev-server；Encore 默认不内建 dev server，如需热更新（HMR），需额外配置 .enableReactPreset() 或搭配 dev-server 插件，但多数 Symfony 项目用 watch + 浏览器刷新已足够高效。
Twig 中正确引用资源
构建后，别硬写路径。始终用 Symfony 的 asset() 函数：
<link rel="stylesheet" href="%7B%7B%20asset('css/app.css')%20%7D%7D"><script src="%7B%7B%20asset('js/app.js')%20%7D%7D"></script>
只要 config/packages/asset.yaml 正确配置了 manifest 路径，asset() 就能自动替换为带哈希的文件名（如 /build/css/app.8d3f2a.css），无需改模板。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
