Naming chunks & custom naming function

I want to use chunked modules, I can successfully compile and name the main bundle, but I also have view-specific js files that I only need in certain places. There’s also a custom function that generates the required name for the specified output file. The config looks like this:

module.exports = {
    cache:   true,
    context: path.join(__dirname, '../src/js'),
    entry: [
        './index'
    ],
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: custom('core') + '.js'
        namedChunkFilename: '[name].js'
    }
}

My index has requires for everything that I need in the code + entries like this:

require.ensure(['./View/A'], function (require) {}, 'A');
require.ensure(['./View/B'], function (require) {}, 'B');

Everything gets compiled as expected, but the chunks are named A.js / B.js. Is it possible to specify for output.namedChunkFilename a function that receives a name and returns the new name that one wants to use? Like this:

module.exports = {
    output: {
        path: path.join(__dirname, '../public/js'),
        namedChunkFilename: function(name) {
            return 'prefix_' + name;
        }
    }
}

Or some other way (that currently exists) to get the chunk names passed though another function?

Author: Fantashit

2 thoughts on “Naming chunks & custom naming function

  1. require.ensure is possible, but it’s not the right tool for this job. require.ensure loads code on demand. But you want to load code at the page load. require.ensure is pretty useful for a SPA.

    You can force modules into the commons chunk:

    entry: {
      A: ["Dialogue", "ViewA"],
      B: ["Dialogue", "ViewB"],
      C: ["ViewC"],
      "commons.js": ["Button", "Dropdown"]
    },
    output: {
      filename: "[name].js"
    },
    plugins: [
      new webpack.CommonsChunkPlugin("commons.js")
    ]

Comments are closed.