的WebPack分裂代碼動態進口

我有一個使用的WebPack的應用程序，現在我要做到以下幾點：的WebPack分裂代碼動態進口

有幾個資源的文件夾：

resources 
├── A.json 
├── B.json 
└── C.json

我想加載一個他們動態的：

function getResource(name, callback) { 
    require(['./resources' + name + '.json'], function(resource) { 
     callback(resource); 
    }); 
}

這對我來說工作得很好，希望我所有的資源打包成一個單獨1.js文件，但我想將它們分割，僅裝入需求之一。

我該怎麼用webpack做到這一點？

來源

2016-02-12 just-boris

你看過webpack的code splitting？語法require.ensure('foo.js', function() { ... })將導致webpack在編譯時將foo.js構建到單獨的文件中，並在運行時根據需要（通過AJAX/JSONP）加載它。

儘管動態需求是webpack中的一種反模式，而require.ensure只接受模塊的靜態值（不是表達式）。一個簡單的方法來獲得的行爲將設置靜態require.ensure電話在switch聲明，或者如果/別人的，或者類似的東西：

switch (someFlagYouSet) { 
    case 'a': 
    require.ensure('./resources/A.json', function() {...}) 
    break; 
    case 'b': 
    require.ensure('./resources/B.json', function() {...}) 
    break; 
    ... 
}

也許不是優雅的一想，而是動態的，需要別在靜態分析和資產生成方面確實很好，所以你已經習慣了。您仍然可以在運行時獲得按需加載。

來源

2016-02-12 21:58:46

Brendan，謝謝你，我給了我幾捆。但問題是我不能使用開關，因爲我不知道資源的實際名稱。這是插件，我不想明確枚舉它們 –

@ just-boris不幸的是，你不能真正在webpack中做到這一點，並且需要使用webpack來構建，以便與其他構建集成。在某種程度上，我認爲你需要命名每個文件。我確實解決了一個類似的問題：我通過webpack config（在那裏命名每個文件）將每個資源分別放入一個單獨的條目塊中，然後編寫自定義邏輯以在運行時請求它們（不使用'require'）。因爲它們是入口塊，所以它們共享相同的webpack運行時，並且可以在服務時與應用程序的其餘部分進行集成。 –

是的，我同意你的意見。寫一個自定義插件到webpack是唯一的出路 –

的WebPack分裂代碼動態進口

回答

相關問題