0
我創建了一個類似於webpack/webpack/.../multi-part-library的示例的多部件庫。在我的應用我想能夠導入我的媒體庫的部分是這樣的：如何使用webpack包含多部件庫？
ìmport Button from 'myLib/atoms/button';
// or
import { Button } from 'myLib/atoms';
的應用我的WebPack配置是這樣的，我得到一個錯誤（Cannot resolve module 'myLib/atoms'或Cannot resolve module 'myLib/atoms/button'）：
module.exports = {
'entry': {
'app': './client.js',
},
'output': {
'filename': 'bundle.js',
},
'externals': {
'react': true,
'react-dom': true,
'myLib': true,
},
'module': {
'loaders': [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
},
]
},
};
該庫的配置的WebPack看起來是這樣的：
const files = glob.sync('**/*.js', {
cwd: path.join(__dirname, 'atomic-design'),
absolute: true,
});
let entries = {};
files.forEach((file) => {
const name = path.basename(path.dirname(file));
const newName = `atoms/${name}`;
entries[newName] = file;
});
module.exports = {
'entry': entries,
'output': {
'path': path.join(__dirname, 'lib'),
'filename': 'myLib.[name].js',
'library': ['myLib', '[name]'],
'libraryTarget': 'umd',
'umdNamedDefine': 'myLib',
},
'externals': {
'react': true,
'react-dom': true,
},
'module': {
'loaders': [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
]
}
};
這些文件的結構是這樣的：
- app
- client.js
- webpack.config.js
- myLib
- webpack.config.js
- atomic-design
- button
- index.js
- text-field
- index.js
到目前爲止，我只能找到使用webpack創建庫的教程，他們只使用庫的小例子。
感謝您的幫助提前！
最好的問候， JBrieske