Webpack output.library配置问题：React生产包无法在HTML中调用

问题排查与修复步骤 #

1. 修正Webpack配置的语法错误 #

你的Webpack配置存在三处关键问题：

• 未导出完整的配置对象，需基于defaultConfig做扩展
• 错误引用defaultConfig.module.output，正确路径应为defaultConfig.output
• 缺少path模块的引入

修正后的配置：

const path = require('path');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
    ...defaultConfig,
    output: {
        ...defaultConfig.output,
        path: path.resolve(__dirname, './dist'),
        library: "MyLib",
        libraryTarget: 'umd',
        globalObject: 'this' // 修复浏览器环境下全局对象绑定异常
    }
};

添加globalObject: 'this'是为了避免UMD模块在浏览器中绑定到self而非window的问题。

2. 修正入口文件（index.js）的内容 #

你当前的index.js是Webpack自动生成的UMD包裹代码，这不是入口文件该有的内容。入口文件需要主动导出你要暴露的React组件，示例：

// 导入你的HomePage组件
import HomePage from './components/HomePage';

// 将组件导出为库的对外成员
export { HomePage };

3. 修正HTML中的变量大小写与依赖顺序 #

• 你配置的library名称是MyLib（首字母大写），需使用window.MyLib而非window.myLib
• 确保在加载你的库之前，提前引入React和ReactDOM的全局版本（若Webpack未将它们打包进库）

修正后的HTML脚本：

<!-- 先引入React和ReactDOM的生产版本 -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- 再引入你打包后的库文件 -->
<script src="./dist/[你的打包文件名].js"></script>

<script>
    $(document).ready(function () {
        ReactDOM.createRoot(document.getElementById('main')).render(
            React.createElement(window.MyLib.HomePage)
        );
    });
</script>

注：React 18推荐使用createRoot替代旧版ReactDOM.render。

4. 验证打包结果 #

执行Webpack打包后，打开浏览器控制台直接输入MyLib，确认能看到导出的HomePage组件，说明全局挂载成功。

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