javascript - 如何将 webpack 模块导出到全局变量中

Question

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

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

dependency.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 将分析您的引用并决定何时可以使用现有包而不是执行新 block 。这样您就可以轻松更改配置中的 bundle 内容，而无需更改代码。