Webpack: How to specify the URI of split bundles?

[d4goxn]

I am using the CommonsChunkPlugin with require.ensure, and I am running into a problem where a chunk is requested with just a filename, instead of a root relative URI. Is there a way that I can tell CommonsChunkPlugin to prefix all requests for bundles?

Currently, require.ensure requests the chunk using just a filename: GET 1.1.js. I am trying to find a way to prepend / or /dist/ to all requests made by require.ensure. It would also be cool if I could get the chunk to use the namedChunkFilename instead of something link "1.1.js", but that is a unrelated.

The require.ensure call, in a React Router route component:

    componentDidMount() {
        require.ensure([], require => {
            this.setState({
                component: require("./article-editor")
            });
        });
    }

The config:

    entry: {
        app: "./app/client.js",
        // The  editor app at /post isn't listed as an entry point here, because it is defined using require.ensure
        vendor: [
            "alt",
            // snip
            "superagent",
        ]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].js",
        namedChunkFilename: "[name]-[chunkhash].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity)
    ],
    module: {
        loaders: [{
            test: /\.json$/,
            exclude: "node_modules",
            loader: "json"
        }, {
            test: /\.js$/,
            exclude: "node_modules",
            loader: "babel"
        }]
    },

[cheets]

I have same issue with Intl.js. Safari says:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (index.js, line 0) http://server.dev/folder1/folder2/2.intl-polyfill/index.js

The correct folder would be http://server.dev/dist/2.intl-polyfill/index.js. All my other webpack bundled js files are correctly loaded from /dist/ folder. I'll have to try older versions of webpack to see if this is a regression.

[cheets]

Ok, fixed it. You need to set output.publicPath. Here's what I have:

    output: {
        path: path.resolve(__dirname, "src/main/webapp/dist/"),
        publicPath: "/dist/",
        filename: "[name]/index.js",
        sourcePrefix: ""
    }

Take a look in https://github.com/webpack/docs/wiki/configuration for more options. I think you can use output.hotUpdateChunkFilename or output.chunkFilename to change the chunk's filename. Also you can set the name in code when exporting functions etc:

export default function doSomething(arg) {
    code...
    }, 'chunk-name');
}

[ChrisBAshton]

Thanks @cheets, that helped me debug my Webpack build. Was missing a / at the beginning of publicPath, i.e. publicPath: "dist/", => publicPath: "/dist/",