如何通过webpack 5.89.0与expose-loader引入Chessground并在HTML中调用

问题根源 #

1. Chessground模块的导出方式导致直接命名导入失败
2. expose-loader生成的代码依赖Node.js的require函数，浏览器环境不支持
3. HTML页面存在重复的board ID，可能导致DOM获取异常

修复步骤 #

1. 调整入口文件，手动挂载全局对象 #

修改_assets/index.mjs，将Chessground挂载到浏览器的window全局对象，让HTML脚本能直接访问：

import * as ChessgroundModule from 'chessground';
window.Chessground = ChessgroundModule.Chessground;

2. 移除expose-loader配置 #

删除webpack.config.js中针对chessground的expose-loader规则，避免生成依赖require的代码：

// 删掉这段配置
/*
{
    test: require.resolve('chessground'),
    loader: 'expose-loader',
    options: {
        exposes: ['Chessground'],
    },
}
*/

3. 修正HTML页面的重复ID #

移除重复的<div id="board">标签，确保DOM获取正确：

<div id='board'></div>
<script src="assets/bundle.min.js"></script>
<script>const ground = Chessground(document.getElementById('board'), {})</script>

4. 可选：优化webpack模块解析（若仍有问题） #

在webpack.config.js中添加扩展名解析配置，确保正确识别模块文件：

module.exports = {
  // ...其他已有配置
  resolve: {
    extensions: ['.mjs', '.js', '.json'],
  },
};

验证 #

重新运行webpack编译，打开HTML页面，控制台应无报错，棋盘正常渲染。

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