dynamic chunk name support?

[mrdulin]

here is my code:

function loadModules(names) {
    names.forEach(function(name) {
        require("bundle!./modules/" + name + ".js")(function(module) {
            console.log(module);
        });
    })
}

webpack output:

Hash: 63772999c38e15403ad6
Version: webpack 1.13.1
Time: 451ms
                       Asset       Size  Chunks             Chunk Names
main.63772999c38e15403ad6.js    8.74 kB       0  [emitted]  main
               chunks/1.1.js  203 bytes       1  [emitted]
               chunks/2.2.js  203 bytes       2  [emitted]
               chunks/3.3.js  203 bytes       3  [emitted]
                  index.html  333 bytes          [emitted]
   [0] ./src/main.js 2.15 kB {0} [built]
   [3] ./src/modules/a.js 29 bytes {1} [built]
   [5] ./src/modules/b.js 29 bytes {2} [built]
   [7] ./src/modules/c.js 29 bytes {3} [built]
    + 4 hidden modules
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

But the chunk filename is 1.1.js, 2.2.js, 3.3.js. I want to get the module filename like: [id].[name].js.

But when I modify my code like this:

function loadModules(names) {
    names.forEach(function(name) {
        require("bundle?name=" +name+ "!./modules/" + name + ".js")(function(module) {
            console.log(module);
        });
    })
}

webpack output:

Hash: ddb1bfed1d512f444e7d
Version: webpack 1.13.1
Time: 453ms
                       Asset       Size  Chunks             Chunk Names
main.ddb1bfed1d512f444e7d.js    4.19 kB       0  [emitted]  main
                  index.html  333 bytes          [emitted]
   [0] ./src/main.js 2.16 kB {0} [built]
   [1] ./src ^bundle\?name=.*\.js$ 160 bytes {0} [built]
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

bundle-loader not work. It does not generate my module chunks.

[MobiusHorizons]

I just struggled through this, so it should definitely be better documented, but the way to do this, is to set the name parameter AND set output.chunkFilename.

for exmample:

module.exports = {
   entry: { ... },
   output : {
      path : ...,
      filename : '[name].js',
      chunkFilename : '[id].[name].js', // or whatever other format you want.
   },
}

then require the resources like so require('bundle-loader?name=[name]./some-module.js');

[michael-ciniawsky]

@MobiusHorizons Mind sending a PR ? 😛

[MobiusHorizons]

I was already thinking of doing that when i'm done here at work.

[mrdulin]

@MobiusHorizons Bundle-loader seems don't support dynamic name parameter.

This is not working.

const loadModule = moduleName => {
  const defaultFile = 'index.js';
  return new Promise((resolve, reject) => {
    const bundle = require(`bundle-loader?name=${moduleName}!./containers/${moduleName}/${defaultFile}`);
    bundle(function (module) {
      const Component = module.default;
      resolve(Component);
    });
  });
};

This is working.

const bundle = require(`bundle-loader?name=about!./containers/about/index.js`);
bundle(function (module) {
  const Component = module.default;
  console.log(Component);
});