Webpack打包ES6模块时出现“未提供名为default的导出”错误的问题求助

各位大佬好，我正在给团队的JavaScript项目配置Webpack，打算用ES6类编写新代码，打包后作为可复用模块使用。我搭了个极简测试例子，定义了一个TestClass，Webpack能正常识别并打包它，但在另一个JS文件里导入这个类的时候，却碰到了**“未提供名为default的导出”**的错误，折腾半天没搞清楚问题出在哪，来求助下大家！

先贴一下我的相关代码：

1. 待导出的ES6类文件 TestClass.js #

class TestClass { 
    constructor() {
      console.log("constructor called");
    }
}

export default TestClass;

2. 导入模块的入口文件 init.js #

import TestClass from "./TestClass.js";

3. Webpack配置文件 webpack.config.js #

const path = require('path');

module.exports = {
    mode: 'development',
    watch: true,
    entry: './init.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, '../WebContent/scripts/dist')
    }
};

打包后生成的main.js里，对应TestClass.js的代码片段如下：

/***/ "./TestClass.js":
/*!**********************!*\
  !*** ./TestClass.js ***!
  \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    // 这里是Webpack打包后的转换代码，但运行时始终无法正确识别default导出
})

我按照ES6模块的标准写法，用export default导出类，再用默认导入的方式引入，理论上应该没问题啊？是不是Webpack的配置漏了什么关键项，还是我的模块写法有隐藏的问题？麻烦各位帮忙看看，谢谢啦！

备注：内容来源于stack exchange，提问作者flixe