如何在 webpack 中包含多部分库？答案

【问题标题】：How can I include a multi part library with webpack?如何在 webpack 中包含多部分库？
【发布时间】：2016-10-26 08:36:09
【问题描述】：

我创建了一个类似于来自webpack/webpack/.../multi-part-library 的示例的多部分库。在我的应用程序中，我希望能够像这样导入我的库的一部分：

ì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

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

我相信您需要为您尝试导入到resolve.modulesDirectories 的模块添加路径（并相应地调整from 'path'）。

请记住 this will change in Webpack2，它功能齐全，只是缺少发布文档。

【讨论】：