如何在Symfony项目中通过Webpack Encore添加外部库？

针对你的需求，有两种常用方案，可根据场景选择：

方案1：直接打包进Bundle（最简单） #

这种方式无需修改webpack配置，安装后直接在代码里导入使用即可：

1. 通过npm安装web3：

npm install web3

2. 在目标入口JS文件（比如./assets/shop/entry.js）里导入并使用：

// 导入web3
import Web3 from 'web3';

// 正常初始化并使用
const web3 = new Web3('https://your-eth-node-url');
// ... 后续业务逻辑代码

Webpack Encore会自动把web3打包到对应的shop-entry.js bundle中，无需额外配置。

方案2：用addExternals不打包（减小Bundle体积） #

如果不想把web3打包进自有bundle（比如想通过CDN加载、降低打包体积），可以用addExternals配置：

1. 先安装web3（本地开发若需要类型提示，可加--save-dev）：

npm install web3 --save-dev

2. 修改你的webpack.config.js，添加addExternals配置项：

Encore
  .setOutputPath('public/build/')
  .addEntry('apiPlatform', './assets/apiPlatformCustomize.js')
  .addEntry('shop-entry', './assets/shop/entry.js')
  .disableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction())
  .enableSassLoader()
  .autoProvidejQuery()
  // 新增配置：告诉webpack，当代码里import 'web3'时，直接使用全局的window.Web3对象
  .addExternals({ web3: 'Web3' })
;

3. 在HTML模板（比如base.html.twig）中通过CDN引入web3，注意要在你的bundle加载前引入：

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

4. 之后在JS代码里依然可以正常导入使用：

import Web3 from 'web3';
const web3 = new Web3('https://your-eth-node-url');

此时webpack不会把web3打包进你的bundle，而是直接调用CDN加载的全局Web3对象。

两种方案的区别 #

• 方案1：无需依赖外部CDN，打包后bundle包含web3，适合小体积库或不想依赖外部资源的场景。
• 方案2：bundle体积更小、加载速度更快，但依赖外部CDN，需要确保CDN的稳定性和版本一致性。

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