Webpack打包后custom.js文件为空，求原因解析

核心原因 #

1. 重复入口触发Tree Shaking优化
   你在Webpack的entry中同时声明了main（对应app.js）和custom（对应custom.js）两个入口，又在app.js里导入了custom.js。在production模式下，Webpack默认启用的Tree Shaking会检测到custom.js的代码已经被包含在main.js中，因此会将独立的custom.js入口优化为空文件——它认为这个入口的代码属于重复冗余内容，无需重复输出。

2. 副作用代码未被正确识别
   如果custom.js中的代码是直接执行的副作用逻辑（比如GDPR通知的初始化代码），Webpack在production模式下可能会误判这些代码没有被"引用"，进而在优化独立入口时将其剔除。

解决方案 #

方案一：保留独立的custom.js文件 #

若你确实需要custom.js作为独立文件输出，按以下步骤修改：

• 删除app.js中的import './custom.js'语句，避免重复引用；
• 在项目根目录的package.json中添加副作用声明，告诉Webpackcustom.js中的代码不能被Tree Shaking移除：

{
  "sideEffects": ["./src/custom.js"]
}

方案二：将代码合并到main.js中 #

若不需要独立的custom.js文件，直接调整Webpack配置：

• 删除entry中的custom项，仅保留main入口：

entry: {
  'main' : './src/app.js'
}, 

此时custom.js的代码会被打包到main.js中，正常执行原有逻辑。

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