alisabzevari alisabzevari - 2 years ago 190
AngularJS Question

Webpack: Create a bundle with each file in directory

I am trying to bundle every angular module in webpack. My target is to have one app.js that will be bundled by webpack with this configuration:

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

I will place this bundle script in my index.html so it will entry point of my app.
Also I have many modules in
folder. Folder structure in like:

| |
| |--home
| | |
| | |--home.html
| | |--home.js

I have required
so when I load
all of its needed files will load.
The problem is I have several components like
and I want to tell webpack to bundle each component separately and name it with its containing folder like

How can I config webpack to create these bundles and put them in

Answer Source

I ended up defining entries programmatically. I wrote this in my 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";

And then used entry variable in config.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download