如何將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將分析您的引用，並確定何時可以使用現有的包而不是做新的塊。 這樣，您可以輕松更改配置中的包內容，而無需更改代碼。