Webpack：爲目錄中的每個文件創建一個包

我想要將每個角度模塊綁定到webpack中。我的目標是有一個app.js將通過的WebPack這個配置捆綁：Webpack：爲目錄中的每個文件創建一個包

entry: { 
     app: "./app/app.js" 
}, 
output: { 
     path: "./build/ClientBin", 
     filename: "bundle.js" 
},

我將會把這個包腳本在我的index.html所以將我的應用程序的入口點。另外我在./app/components文件夾中有很多模塊。在這樣的文件夾結構：

app 
|--components 
| | 
| |--home 
| | | 
| | |--home.html 
| | |--home.js 
|--app.js 
|--AppController.js

我已經要求home.html在home.js所以當我加載home.js其所有需要的文件將加載。問題是我有幾個組件，如home，我想告訴webpack將每個組件分開捆綁，並將其命名爲其包含的文件夾，如home。

如何配置webpack來創建這些包並將其放入./build/components？

來源

2015-06-13 alisabzevari

我最終以編程方式定義了條目。我在webpack.config.js寫了這個：

function getDirectories(srcpath) { 
    return fs.readdirSync(srcpath).filter(function (file) { 
     return fs.statSync(path.join(srcpath, file)).isDirectory(); 
    }); 
} 

var entry = { 
    app: "./app/app.ts", 
    vendor: ["angular", "oclazyload", "angular-new-router", "lodash"] 
}; 
var components = getDirectories("./app/components"); 
for (var i = 0; i < components.length; i++) { 
    entry[components[i]] = "./app/components/" + components[i] + "/" + components[i] + ".ts"; 
}

然後在配置使用entry變量。

來源

2015-06-16 07:07:57 alisabzevari

你可以達到你想要的東西是這樣的：

entry: { 
    home: './app/app.js', 
    page: './page/app.js', 
}, 
output: { 
    path: './build/ClientBin', 
    filename: '[name].js', 
},

這將產生在你的輸出路徑home.js和page.js。調整，根據需要進行概括。您可能想要將這些入口路徑提取到變量等。

請注意，只需稍微調整一下，您就可以將捆綁包準確輸出到您想要的位置。我希望你會使用像./app/components/[name]這樣的path左右。

來源

2015-06-14 07:49:26

的問題是，我不知道有多少項目會。我已編輯該問題以顯示我的解決方法，但我正在尋找一種開箱即用的解決方案。 – alisabzevari

您的解決方案對我來說很不錯。作爲一個配置驅動的工具，Webpack並不關心你如何生成配置，只要它是正確的。 –

聽起來合乎邏輯！那麼，我該如何完成這個問題工作流呢？我的意思是我必須把這個編輯過的部分放到答案上？ – alisabzevari

更簡單的方法：

使用水珠在webpack.config.js：

下面是一個例子：

var glob = require("glob"); 

module.exports = { 
    entry: { 
    js: glob.sync("./app/components/**/*.js"), 
    } 
}

來源

2016-05-27 09:19:53 David

儘管接受的答案使用了開箱即用的工具，但這是迄今爲止最簡單，也是我的首選答案。 –

確保首先安裝npm的webpack-glob。 'npm install webpack-glob --save-dev' – MichaelHuelsen

Webpack：爲目錄中的每個文件創建一個包

回答

相關問題