動態另一個項目

這裏裝載的WebPack束就是我想要做的：動態另一個項目

有一個SubApp當用的WebPack建，創建一個vendor.js和app.js束。以這種方式構建的應用程序已經可用有一個MainApp，動態加載供應商和應用程序包SubApp。這不起作用。

當裝載包，我發現了以下錯誤：

Cannot read property 'call' of undefined

我使用所有代碼代碼：

SubApp的WebPack配置：

{ 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './app.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: '[name].js', 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks(module) { 
     return module.context && module.context.indexOf('node_modules') >= 0; 
     }, 
    }), 
    ], 
};

SubApp app.js：

import angular from 'angular'; 

angular.module('barApp', []) 
.component('foobar', { 
    template: `BAR APP`, 
});

MainApp的WebPack配置：

{ 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './nav.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: '[name].js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.html$/, 
     use: [{ loader: 'html-loader' }], 
     }, 
    ], 
    }, 
    devServer: { 
    contentBase: path.resolve(__dirname, './src'), 
    }, 
};

MainApp app.js：

Promise.all([ 
    import('./SubApp/dist/vendor.js'), 
    import('./SubApp/dist/app.js'), 
]).then(([ vendor, app ]) => { 
    console.log('Success'); 
}).catch(err => { 
    console.log("Chunk loading failed", err); 
});

運行MainApp（無論是從開發服務器或內建文件）會產生：Chunk loading failed TypeError: Cannot read property 'call' of undefined。

我正在使用webpack 2.5.0。

編輯：在一些調查中，它看起來像我可以讓我的當前設置工作，如果我裝的供應商和順序的應用程序，這樣做會但裝載顯著放緩，因爲我需要等待大（供應商）捆綁軟件在讀取實際應用程序之前首先加載。

AFAIK，動態加載的模塊仍應按請求的順序執行，而不是按照哪個請求先完成。

有一些指針，我可以將SubApp作爲library打包，但如果我想擁有單獨的供應商和應用程序捆綁包，則不知道該怎麼做。

來源

2017-05-07 Maciej Gurban

這只是一個建議，但有沒有什麼能阻止你讓MainApp將SubApp的文件捆綁到它的發行版中，從而有效地在兩個發行版中使用SubApp代碼？

這就是我現在看到的，如果我沒有弄錯，用戶如何訪問您的項目。

MainApp, Standalone -> SubApp as a resource 
SubApp, Standalone

儘管它可能看起來像你把相同的代碼在兩個地方，我認爲這將導致幾個好處，包括能夠設定爲SubApp一些獨立的環境設置，這將是多餘或導致衝突您的主應用程序的環境。

至於如何真正做到這一點，我仍然建議儘可能重新使用webpack配置。webpack-merge是一個偉大的包，這個，webpack配置或不，它合併漂亮，可定製。

<= means 'merged from' 

webpack.subapp.base.config.js 
webpack.mainapp.config.js <= webpack.subapp.resource.js <= webpack.subapp.base.config 
webpack.subapp.standalone.js <= webpack.subapp.base.config.js

所以你獨立/ SubApp的資源CONFIGS將負載從base配置的所有基本值，而將基於無論是獨立運行或不設置。

此外，由於它看起來您的SubApp和MainApp都在同一個目錄中（這是否正確？），因此合併這些配置時不會遇到目錄問題。一切都好！但是如果遇到問題，只需在SubApp的resource配置中使用'../'作爲輸入。

我希望這個答案可以激發你的項目的一些可擴展性！我也有過這些類型的問題，通常webpack合併就是答案。這也適用於在dev/prod模式下運行時，所以一定要考慮這些可能性。

來源

2017-05-08 06:18:28

嗨威廉。我使用異步模塊加載的原因是爲了避免做你的建議。 MainApp會立即加載，因爲在我的情況下它需要知道需要在某個點上按需加載的模塊。在現實生活中，不會有一個，而是多個SubApp。將它們全部發送到MainApp意味着向客戶端發送幾MB包，而不管它們是否需要每個SubApp有或沒有的功能（並且在縮小和壓縮後）。 –

無論哪種方式，我真正的問題是能夠同時加載所有文件，但能夠按列出的順序執行它們 - 如果我將

相關問題

動態另一個項目

回答

相關問題