Webpack：导入软件包时，导出显示为未定义

Question

我有一个简单的共享ui组件库。现在，它的src / index.js看起来像这样：

import Avatar from "./components/Avatar";
import Heading1 from "./components/Heading1";

import styles from "./global.css";

export { Avatar, Heading1 };

我的webpack配置如下：

var path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
        use: ["file-loader"],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

当我尝试将共享ui库导入到单独的前端React应用中时，

import { Avatar } from 'myapp-ui';
console.log('xxxxxxxxxxxxxxxxx', Avatar);

它会打印出xxxxxxxxxxxxxxxxx undefined

似乎webpack无法正确捆绑我的共享ui库。我在配置中缺少什么吗？