如何为Symfony 4项目配置Webpack？Babel配置报错如何解决？

一、先搞定 Symfony 4 的 Webpack 基础配置 #

Symfony 官方推荐用 Webpack Encore 来管理前端资源，配置步骤很清晰：

1. 安装 Webpack Encore
   在项目根目录执行命令：

   npm install @symfony/webpack-encore --save-dev
   # 或者用 yarn
   yarn add @symfony/webpack-encore --dev
   

2. 创建 Webpack 配置文件
   在根目录新建 webpack.config.js，写入基础配置（可根据需求调整）：

   const Encore = require('@symfony/webpack-encore');
   
   // 配置运行环境
   if (!Encore.isRuntimeEnvironmentConfigured()) {
       Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
   }
   
   Encore
       // 编译后资源的输出目录（对应 public 目录下的 build 文件夹）
       .setOutputPath('public/build/')
       // 浏览器访问资源的基础路径
       .setPublicPath('/build')
       // 配置入口文件（比如你的主 JS 文件）
       .addEntry('app', './assets/js/app.js')
       // 启用单 runtime chunk，避免缓存问题（可选但推荐）
       .enableSingleRuntimeChunk()
       // 每次编译前清空旧的输出文件
       .cleanupOutputBeforeBuild()
       // 开发环境生成 source map，方便调试
       .enableSourceMaps(!Encore.isProduction())
       // 生产环境启用版本号，实现缓存 busting
       .enableVersioning(Encore.isProduction())
       // 如果需要编译 Sass/SCSS，取消下面的注释
       // .enableSassLoader()
   ;
   
   module.exports = Encore.getWebpackConfig();
   

3. 配置 npm 脚本
   在 package.json 的 scripts 字段里添加编译命令：

   "scripts": {
       "dev": "encore dev",
       "watch": "encore dev --watch",
       "build": "encore production --progress"
   }
   

   • npm run dev：开发环境编译一次
   • npm run watch：监听文件变化，自动重新编译
   • npm run build：生产环境编译（压缩、优化资源）

4. 在模板中引用资源
   在 Twig 模板里用 Symfony 的辅助函数引入编译后的资源：

   {# 引入 CSS #}
   {{ encore_entry_link_tags('app') }}
   {# 引入 JS #}
   {{ encore_entry_script_tags('app') }}
   

二、解决你遇到的 Babel 警告与错误 #

你遇到的三个问题都是因为 Webpack Encore 的 Babel 配置和手动创建的 .babelrc 冲突导致的，一步步来修复：

1. 消除 "callback 参数不会被使用" 的警告 #

因为你已经手动创建了 .babelrc，Encore 会优先使用这个外部配置，所以在 webpack.config.js 里调用 configureBabel() 时，第一个参数（回调函数）会被忽略。要去掉警告，需要把第一个参数改成 null：

Encore.configureBabel(null, {
    // 这里放你的 Babel 额外配置
});

2. 替换过时的 include_node_modules 参数 #

警告提示 include_node_modules 已被弃用，需要改成驼峰式的 includeNodeModules。

3. 解决 "includeNodeModules 和 exclude 不能同时使用" 的错误 #

Encore 不允许在 configureBabel() 里同时设置 includeNodeModules 和 exclude，你需要二选一：

• 如果你只想让某些 npm 包被 Babel 编译，用 includeNodeModules 指定包名数组：

  Encore.configureBabel(null, {
      includeNodeModules: ['lodash', 'axios'] // 只编译这些包
  });
  

• 如果你想排除大部分 node_modules 包，只编译自己的代码，那就删掉 includeNodeModules，改用 exclude：

  Encore.configureBabel(null, {
      exclude: /node_modules/ // 排除所有 node_modules 包
  });
  

额外建议：完全使用自定义 .babelrc #

如果你想完全靠自己的 .babelrc 配置 Babel，甚至可以直接删掉 webpack.config.js 里的 configureBabel() 调用，Encore 会自动读取你的 .babelrc 文件，这样就不会有任何冲突了。

最后确认你的 .babelrc 配置没问题，比如可以加上目标浏览器的配置，让编译更精准：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not dead"]
      }
    }]
  ]
}

内容的提问来源于stack exchange，提问作者Glad