alisabzevari alisabzevari - 6 months ago 47
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
./app/components
folder. Folder structure in like:

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


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

How can I config webpack to create these bundles and put them in
./build/components
?

Answer

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.

Comments