必须正确配置Webpack Encore才能实现Symfony前端资源自动编译、压缩及哈希文件生成：需安装依赖、设setOutputPath为public/build/、addEntry匹配模板引用、启用enableVersioning与cleanupOutputBeforeBuild，并通过import触发CSS/Sass打包。
要让 Symfony 项目前端资源自动编译、压缩并生成带哈希值的静态文件，必须正确配置 Webpack Encore——它不是开箱即用的黑盒，每一步路径、入口和启用项都直接影响构建结果是否能被 Symfony 正确引用。
初始化 Encore 并安装依赖
进入已存在的 Symfony 项目根目录（确保有 package.json），执行：
npm install @symfony/webpack-encore --save-dev
这一步会把 Encore 安装为开发依赖，并写入 package.json。如果项目尚未初始化 npm，先运行 npm init -y 再安装，否则 npm install 会报错找不到 package.json。
立即学习“前端免费学习笔记（深入）”；
创建基础 webpack.config.js
在项目根目录新建文件 webpack.config.js，粘贴以下最小可用配置：
const Encore = require('@symfony/webpack-encore');Encore .setOutputPath('public/build/') .setPublicPath('/build') .addEntry('app', './assets/js/app.js') .cleanupOutputBeforeBuild() .enableSingleRuntimeChunk() .enableSourceMaps(!Encore.isProduction()) .enableVersioning(Encore.isProduction());module.exports = Encore.getWebpackConfig();
【setOutputPath 必须指向 public/build/】——Symfony 的 Web 服务器默认只公开 public/ 下的文件，若输出到 dist/ 或 build/ 根目录，浏览器将 404。
准备前端资源入口文件
按配置中指定的路径，创建目录结构与入口文件：
mkdir -p assets/jsecho "console.log('Hello from app.js');" > assets/js/app.js
这一步不能跳过或改名：如果 addEntry('app', ...) 中第一个参数是 'app'，最终生成的 JS 文件就是 build/app.js；模板里需用 {{ encore_entry_script_tags('app') }} 引入，不匹配就加载失败。
启用 CSS 和 Sass 支持
方法一：仅处理普通 CSS 文件
安装 loader：npm install --save-dev css-loader style-loader
在 webpack.config.js 中添加：.enableCssLoader()
方法二：支持 Sass（推荐）
执行：npm install --save-dev sass sass-loader
在配置末尾追加：.enableSassLoader()
然后创建 assets/css/app.scss，并在 assets/js/app.js 顶部加入：import '../css/app.scss';。这行 import 是触发 Webpack 解析样式链的关键，漏掉就不会打包 CSS。
生成生产环境构建
第一步：确保环境变量设为 production
NODE_ENV=production（Linux/macOS）或 set NODE_ENV=production（Windows CMD）
第二步：运行构建命令
npx webpack --config webpack.config.js
第三步：检查输出
打开 public/build/ 目录，应看到类似 app.a1b2c3d4.js 和 app.a1b2c3d4.css 的带哈希文件——这表示 enableVersioning(true) 已生效，且 cleanupOutputBeforeBuild() 清除了旧文件。
