如何将Webpack模块导出到全局变量

Question

我正在尝试将所有依赖项捆绑到一个文件中，并在其他js文件中使用它。 这是捆绑依赖关系的代码。

return gulp.src('./dependencies.js')
    .pipe(webpack({
        output: {
            library: 'home'
        }
    }))

dependencies.js只是一个带有大量需求的文件：例如

require('angular');
require('toastr');
require('...'); 

我试过了output.library，但是我无法访问执行window.toastr或window.home.toastr的模块。 window.home只是一个空对象{} 。

我将如何捆绑所有依赖项并将其作为全局变量访问其他JavaScript文件中？

Answer 1

要指定模块的全局导出，可以使用ProvidePlugin
有了它，您可以将模块导出为全局变量my ：

webpack({
    ...
    plugins: [
        new webpack.ProvidePlugin({ my: './relative/path/to/your/bundle.js' })
    ]
    ...
})

或者，您可以尝试使用您的home图书馆名称而不是路径（可能也可以）

但是我宁愿建议使用DllPlugin将一组模块捆绑到一个文件中，然后使用原始模块名称作为引用。 Webpack将分析您的引用，并确定何时可以使用现有的包而不是做新的块。 这样，您可以轻松更改配置中的包内容，而无需更改代码。