2017-06-07 12 views
0

擁有的WebPack配置,像這樣:如何爲嵌套應用程序配置webpack multicompiler?

module.exports = [ 
    { 
    entry: { main: './main/app.js' }, 
    module: [...] 
    }, { 
    entry: { sub: './sub/app.js' }, 
    module: [...] 
    } 
] 

而且main/app.js像這樣:

import('./foo'); // all files inside ./main should be handled by first config 
import('../sub/bar'); // all files inside ./sub should be handled by second config 

我想,這樣每個配置對象句柄在應用程序的目錄中唯一的文件來配置的WebPack。這意味着即使我在main應用程序中包含sub應用程序的文件,我希望所有加載程序僅適用於從main應用程序導入的文件,並讓sub應用程序文件由sub應用程序配置來處理。

我已經通過多種的WebPack問題和文檔看了,但似乎並沒有成爲一個解決方案。我希望也許有人可以照亮如何實現這一目標。

使用包含/排除不能解決問題 - 這隻會阻止裝載機被應用到指定的文件,但主要的應用程序仍將嘗試加載它們扔不存在裝載機在給定文件中的錯誤。

noParse或webpackIgnorePlugin也不是一個選項,因爲sub應用程序是一個完全成熟的應用程序,它將執行其他文件導入等,noParse將打破這些導入。

編輯:在更高層次上,我試圖做的是讓一個主應用程序動態地將多個子應用程序加載到窗口中(使用動態import())。

每個子應用都應該有自己的WebPack的配置,只有這個配置應該是負責應用正確的裝載機。主要的應用程序應該只爲一個,允許加載子應用程序動態導航,不知道他們可能需要的裝載​​機。

回答

1

默認情況下,當我們運行webpack時,它會加載webpack.config.js,但是我們可以使用webpack多個配置文件來展現應用程序結構。

webpack --config="webpack.app1.config.js"

webpack --config="webpack.app2.config.js"

我們也可以多個條目。

entry: { 
     app: [ 
     './src/app.js', //main javascript file 
     './src/app.scss', //main scss file 
     ], 
     vendor:['jquery'] 

    }, 

然後在模塊規則中,您可以根據結構排除某個文件夾。但建議爲不同的應用程序結構創建分離webpack配置文件。

+0

我目前最終爲每個應用程序導入到一個webpack.config中的單獨的加載程序集合,每個加載程序使用'include'來限制所傳輸的內容等。您建議的方法有效,但在我的情況下,一個「主」的應用程序,動態地進口的所有其他子應用程序,我需要防止主應用程序從試圖transpile子應用的代碼,如果是有道理的。 我還要提到的是各個子應用都有自己的一套裝載機和規則,以及主要的應用程序應該不知道也沒有應用程序需要得到正確編譯什麼子。 –