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'
},
]
}
};
ファイルは、次のように構成されています
これまでのところ、ライブラリの小さな例しか使用しないwebpackでライブラリを作成するためのチュートリアルを見つけることができました。
ご協力いただきありがとうございます。
敬具、 JBrieske