Webpack构建带内部依赖的React库导出模块未初始化如何配置

问题根因 #

你配置的splitChunks规则会将被2个及以上入口引用的公共模块（这里就是Base模块）抽离为独立的公共chunk，而你构建的是多入口UMD库，单个入口的输出文件（比如Data/index.js）不会自动引入依赖的公共chunk，导致Data模块初始化时找不到Base的导出，触发 undefined 报错。当你移除Data对Base的依赖后，没有公共模块需要抽离，每个入口文件包含完整的运行逻辑，因此可以正常运行。

解决方案 #

直接禁用splitChunks即可，保证每个入口输出的UMD文件是完全独立、不依赖其他额外代码块的，符合组件库单入口单独引入的使用场景。

修改webpack.library_create.config.js中的optimization配置：

// 原配置
optimization: {
    minimize: false,
    splitChunks: {
        chunks: "all",
        minChunks: 2,
        minSize: 1,
    },
},

// 修改后
optimization: {
    minimize: false,
    splitChunks: false
},

修改完成后重新构建库，再启动项目即可正常使用带内部依赖的模块。

如果你需要保留公共代码抽离、减少整体包体积，可以将公共chunk的输出路径调整为库根目录下的可访问路径，同时在文档中说明要求使用者在引入业务模块前手动引入公共chunk文件，不过这种方案会大幅提升使用者的接入成本，组件库场景下不推荐使用。

内容的提问来源于stack exchange，提问作者kostya.mikhayloff.1