Question

我创建了一个类似于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

Answer 1

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

相关文件：https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories。

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

如何在webpack中包含多部件库？

1 个答案: