Webpack 4升级后React/Flux应用跨入口事件监听失效求助

嘿，我之前在升级多入口Flux项目到Webpack 4时也碰到过几乎一模一样的问题，大概率是Webpack 4的打包策略变化导致Store实例被重复初始化了，给你几个具体的排查方向：

• 检查Modal Store是否被重复打包
  Webpack 4的splitChunks配置和Webpack 3的CommonsChunkPlugin逻辑差异很大，默认配置可能没把共享的Store模块抽离到公共chunk里，导致container.js和page.js各自打包了一份Modal Store，形成两个独立实例。你可以用webpack-bundle-analyzer插件分析bundle：

  1. 安装插件：npm install webpack-bundle-analyzer --save-dev
  2. 在Webpack配置里添加：

     const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
     module.exports = {
       // ...其他配置
       plugins: [new BundleAnalyzerPlugin()]
     }
     

  运行打包后查看报告，确认Modal Store是不是同时出现在container和page的chunk里。

• 确保Store是单例模式
  如果你的Modal Store是导出类（比如export default class ModalStore {}），然后在container和page里各自new ModalStore()，那Webpack 4的模块解析变化可能加剧了实例重复的问题。一定要改成导出实例的单例模式：

  // ModalStore.js
  class ModalStore {
    // ...你的Store逻辑
  }
  // 直接导出实例，确保所有入口引用的是同一个
  export default new ModalStore();
  

• 调整splitChunks配置抽离公共模块
  手动配置splitChunks，强制把被多个入口引用的共享模块（比如Store、EventEmitter）抽成公共chunk：

  module.exports = {
    optimization: {
      splitChunks: {
        chunks: 'all', // 对所有chunk生效
        minChunks: 2, // 被至少2个入口引用才抽离
        cacheGroups: {
          commons: {
            name: 'commons',
            test: /[\\/]stores[\\/]|EventEmitter/, // 匹配Store目录或EventEmitter模块
            priority: 10, // 优先级高于默认缓存组
            reuseExistingChunk: true
          }
        }
      }
    }
  }
  

• 验证事件总线的一致性
  如果你的Flux用了自定义的EventEmitter作为事件总线，也要确保这个总线是单例。比如不要在每个Store里新建EventEmitter，而是单独导出一个全局实例，让Actions和Store都引用它：

  // eventBus.js
  import EventEmitter from 'events';
  export default new EventEmitter();
  

快速验证小技巧 #

在Modal Store的构造函数里加一行console.log('Modal Store initialized:', this)，然后刷新页面看控制台。如果输出两次，那100%是实例重复的问题，照着上面的方向调整就行。

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