Question

我正在构建要在React应用中导入的组件库。我想公开这些组件，以便可以在应用程序中动态导入它们。

我尝试了什么：

lib＆gt; index.js

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

lib＆gt; 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

我想要实现的目标：

app＆gt; 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配置中设置不同的条目。

公开组件，以便可以在app中动态导入它们

1 个答案: