Webpack打包PIXI.JS游戏：app.js重复执行及控制台大量警告问题

核心问题 #

接入Webpack后，app.js中的顶级代码（创建game-container、实例化PIXI应用等）被重复执行，导致页面出现多个game-container元素，而index.js代码仅执行一次，说明问题出在app.js的模块加载逻辑或Webpack配置上。

可能原因及解决方法 #

1. 模块重复引入或加载 #

Webpack默认会对模块进行缓存，同一模块多次import只会执行一次顶级代码，但以下情况可能导致重复执行：

• 多入口配置错误：检查Webpack的entry配置，确保只将index.js作为唯一入口，没有把app.js也加入入口数组。
• 循环引用：如果app.js和其他模块存在循环引用，可能触发模块重复执行。排查代码中的import关系，解开循环。
• 路径引用不一致：比如在不同文件中用./app.js和../src/app.js引用同一文件，Webpack会视为不同模块，导致重复加载。统一引用路径。

2. 顶级代码无保护逻辑 #

当前app.js的顶级代码没有任何判断，每次模块被加载就会创建新的game-container和PIXI实例。修改代码为单例模式，确保只执行一次：

修改后的app.js：

// 先检查容器是否已存在，避免重复创建
let gameContainer = document.getElementById('game-container');
if (!gameContainer) {
  gameContainer = document.createElement("div");
  gameContainer.id = "game-container";
  document.body.appendChild(gameContainer);
}

// 单例管理PIXI应用实例
let appInstance;
export const getApp = () => {
  if (!appInstance) {
    appInstance = new PIXI.Application({
      width: window.innerHeight * (5 / 3),
      height: window.innerHeight,
    });
    gameContainer.appendChild(appInstance.view);
    
    // 确保resize事件只绑定一次
    const handleResize = () => {
      appInstance.view.width = window.innerHeight * (5 / 3);
      appInstance.view.height = window.innerHeight;
    };
    window.addEventListener("resize", handleResize);
  }
  return appInstance;
};

之后在需要使用PIXI应用的地方，通过调用getApp()获取实例，而不是直接引用app变量：

// 比如在index.js中
import { getApp } from './app.js';
const app = getApp();
// 后续操作app实例

3. Webpack配置排查 #

• 检查html-webpack-plugin：如果使用该插件，确保没有重复注入打包后的脚本，比如配置了多个inject项或者重复添加插件实例。
• 模块模式配置：确认Webpack的output.libraryTarget是否设置正确，避免非预期的模块加载行为。
• 缓存配置：如果禁用了Webpack的模块缓存（比如cache: false），可能导致模块重复执行，确保缓存开启（默认是开启的）。

4. 控制台警告处理 #

大部分警告是重复执行导致的（比如重复绑定事件、重复创建DOM元素），解决重复执行问题后警告会自动减少。此外：

• 检查PIXI.js版本与Webpack的兼容性，确保使用的PIXI版本支持模块导入。
• 如果警告涉及PIXI的canvas操作，确认app.view的挂载逻辑只执行一次。

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