Webpack多个输出文件

Question

我正在使用React构建一个UI组件库，然后被其他我的其他React项目使用。我在这个结构中设置了React组件：

components
  -- component1
       component1.js
       component1.scss
  -- component2
       component2.js
       component2.scss
  index.js

index.js文件只是导出每个组件

export component1 from './component1/component1';
export component2 from './component1/component2';

当我使用webpack构建它时，我得到以下内容：

 -- lib
    components.js
    components.css

包含我可以使用

导入我的应用程序的所有代码

import {component1} from components

（components.css全局导入）

这一切都运行正常，但我希望能够将它们构建到单个文件中，这样我才能导入我需要的组件

-- lib
   -- component1
       component1.js
       component1.css
  -- component2
       component2.js
       component2.css
  index.js

但我仍然希望能够以同样的方式导入：

import {component1} from components

如何使用webpack实现这一目标。是否有任何插件可以允许或者我需要使用多个入口点等？