公開組件，以便它們可以動態導入應用程序

Question

我正在構建要在React應用程序中導入的組件庫。我想公開這些組件，以便它們可以動態地導入到應用程序中。

我試了一下：

LIB> index.js

export const Component1 = import(/* webpackChunkName: "components/Component1" */ './components/Component1') 
export const Component2 = import(/* webpackChunkName: "components/Component2" */ './components/Component2') 

LIB> webpack.config.js

entry: path.resolve('src/index.js'), 
output: { 
    path: path.resolve('build'), 
    filename: 'index.js', 
    chunkFilename: '[name].js', 
    library: 'lib', 
    libraryTarget: 'umd' 
}, 

構建結果

80.13 KB build/index.js 
69.68 KB build/components/Component1.js 
12.4 KB build/components/Component2.js 

我想達到的目標：

應用> index.js

import('lib/components/Component1').then(module => { 
    console.log(module) // Empty object so far 
}) 

我怎麼想導出的組件，使它們可一個接一個？還是有另一種方式？

Answer 1

最後我成功達到了我的意思用在這裏定義的配置：https://github.com/webpack/webpack/tree/master/examples/multi-part-library

我不是異步進口部件了，但在配置的WebPack設置不同的條目來代替。