Question

我正在尝试构建一个Webpack配置，允许我在特定的命名空间中创建多个模块。我有以下配置：

module.exports = {
    entry: {
        'one': './src/modules/one/one.module.js',
        'two': './src/modules/two/two.module.js',
        'three': './src/modules/three/three.module.js',
    },
    output: {
        filename: '[name].module.js',
        path: path.resolve(__dirname, 'dist'),
        library: ['myModules', '[name]'],
        libraryTarget: 'umd',
    },
    ...
};

问题是，它创建了一个全局命名空间：myModules，但子模块不可见。我无法通过运行new window.myModules.one();来创建新实例。我该如何解决这个问题？

Answer 1

假设您正在使用ES模块并且每个模块都有默认导出，则必须访问default属性。

new window.myModules.one.default();

Webpack 3添加了output.libraryExport选项，允许您将特定的导出分配给库目标。您可以只使用默认导出，而不是拥有导出的对象。为此，您需要将output.libraryExport设置为'default'。

output: {
    filename: '[name].module.js',
    path: path.resolve(__dirname, 'dist'),
    library: ['myModules', '[name]'],
    libraryTarget: 'umd',
    libraryExport: 'default',
},

有了这个，你就可以按照自己的意愿使用它。

new window.myModules.one();

Webpack不在库名称空间

1 个答案: