如何将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
有了它，您可以将模块导出为全局var my：

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

或者您可以尝试使用home库名而不是路径（可能它也可以使用）

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