動態加載webpack中的塊？

我們動態加載文件，即我們不知道哪些文件將在運行時加載。同樣，爲了加載速度更快，我們希望將相關文件放在同一個塊中。動態加載webpack中的塊？

我該怎麼用webpack做這件事？

這是我們所擁有的，它與一個404錯誤而失敗（未找到1.1.bundle.js）

這是webpack.config樣子：

entry: { 
    main: //..., 
    related_files: [ //should create chunk for file1 and file2? 
    './file1.js', 
    './file2.js' 
    ] 
},

這是個什麼碼動態載入的文件看起來像：

var dynamicFileName = //... 

require.ensure([], function (require) { 
    //should dynamically load the chunk containing dynamicFileName? 
    //fails with 'file1.js' or 'file2.js' 
    var modImpl = require(dynamicFileName); 
    //... 
});

更新1：錯誤消息是由不配置output.publicPath造成的。但是，我從來沒有創建1.1.bundle.js。它似乎忽略了切入點。

更新2：即使在修復output.publicPath後，也無法加載動態生成的文件名。所以看起來webpack無法處理這個問題。

來源

2015-09-09 U Avalos

-1

默認情況下，webpack會嘗試將所有代碼捆綁到一個文件中。如果您在main入口點使用file1.js/file2.js中的代碼，則webpack將在main.js中捆綁所有文件的內容，而第二個入口點related_files將僅輸出file1/file2內容。

的WebPack使用CommonsChunkPlugin處理這種情況，你的配置應該是這樣的：

entry: { 
    main: //..., 
    related_files: ['./file1.js','./file2.js'] 
}, 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('related_files', 'related_files.js') 
]

問題的

第二部分是的WebPack解析require聲明，並輸出1.1.bundle.js - 動態模塊，可以加載與代碼中的要求。在你的情況下，dynamicFileName = 'related_files'，而不是file1/file2。

請參閱http://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code

來源

2015-09-10 12:13:41 arturkin

要求（「related_files」）正是我不想做的事。有沒有辦法讓require（'file1'）動態工作？ –

在這種情況下，您需要刪除第二個入口點，並需要代碼中需要的模塊，如require（'./ file1.js'）'。 – arturkin

如果我刪除了入口點，那麼要麼所有東西都放在一個包中，要麼我失去了對相關文件包的控制（這些需要放在同一個包中） –

動態加載webpack中的塊？

回答

相關問題