Webpack如何確定包裝中包含什麼？

假設我有一個項目具有以下結構Webpack如何確定包裝中包含什麼？

/app 
|_webpack.config.js 
|_package.json 
|_/npm_modules 
| |_... 
|_/client 
    |_/misc 
    | |_... 
    |_/components 
    | |_... 
    |_index.jsx

和webpack.config.js包含此

entry: ["./client/index.jsx"]

和index.jsx負荷這樣所有組件

var components = []; 
var componentPaths = require.context("./components", false); 
componentPaths.keys().forEach(function(path) { 
    components.push(componentPaths(path)); 
});

什麼文件將被捆綁到導致bundle.js？
它只是/app/client/index.jsx和/app/client/components目錄中的所有文件？
或者將整個/app/client目錄捆綁在一起（包括/app/client/misc下的所有內容）？
或者將整個/app目錄捆綁在一起（包括/app/npm_modules下的所有內容）？

我一直在嘗試基於Webpack文檔來了解這一點，但它們不夠充分。如果你知道答案，包括參考你發現信息的地方會很有幫助。

我在問，因爲我想建立一個具有多個入口點的項目，其中生成的bundle.js文件僅包含必需的項目。

來源

2016-07-12 AjaxLeung

因爲您使用import或require。如果文件沒有被導入或不需要，它將不會被包含在軟件包中。

It's explained here.

注：import是一個ES6特點，你需要通天在大多數瀏覽器使用它。

來源

2016-07-12 18:53:44 Pier

所以你說'/ app/client/misc'下的文件不會被包含在內？ webpack是否搜索每個需求並在文件中導入語句並確定依賴關係？ – AjaxLeung

是的，這是正確的。如果您不導入或需要文件，它將不會被Webpack捆綁。您當然可以編寫節點腳本將這些文件複製到您的開發或生產文件夾。 – Pier

另外，是的，Webpack將會遞歸地搜索每個import/require。 – Pier

Webpack如何確定包裝中包含什麼？

回答

相關問題