Javascript 如何配置webpack以直接导入组件？类材料界面

在我的工作中，我们有一个用于组件的共享ui库

但目前我们需要对这些组件进行代码拆分和动态导入

如今，我们只有一种进口零部件的方式，那就是：

import { Component } from '@library'

但是要使用

nextjs

和

dynamic import

进行有效的代码拆分，我们需要像这样导入它：

Import Component from '@library/component'

我怎么做

目前，我们在项目中有此文件夹结构

• src
  • 组成部分
    • 组件文件夹

我们的网页配置是：

  entry: './src/components/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './index.cjs.js',
    libraryTarget: 'commonjs2',
   library: packageInfo.name
  },

这是我们的dist文件夹：

我们有一个esm文件夹，其中的组件作为esm模块，但当我尝试导入时，它不起作用

我怎样才能有像物料界面这样的导入

我是说

从“@material ui/core/Button”导入按钮