How can I output multiple folders with webpack?

Question

I have a folder structure for my JS modules. I want one module per page. This is not a single page app.

How can I output files in a folder structure?

From what I can see, the only possibility is to output [name].js. This could work if I make the names very unique, or I could make the names have a - for a folder separator. That would mean a/b/c.js would translate to name a-b-c. I really don't like this. I would like to be able to require("a/b/c").

From what I can tell, I can't use a single bundled file either because require is not available outside of the module. If it was, I could just build a single bundle and require("a/b/c") on every page.

If there is a good way to do this that I'm not finding on the internet, please let me know.

It looks like I'm able to easily do this with require.js using r.js, but I don't want to use require.js and would like CommonJS modules.

Answer 1

You can define an entry point using slash, like this:

entry: {
    "main-plugin/js/background":"./src/main-plugin/background"
}

And output like this:

output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js'
},

This setup will create a public/main-plugin/js folder and will place the background.js into it. It works at least on Win7x64.