Webpack chunk path breaks from 3.8.1 -> 4.43.0

195 views Asked by At

I'm working on upgrading an inherited Webpack configuration from v.3.8.1 to v4.43.0, and I'm running into an odd issue with asynchronously loaded chunk files in the latest version. My Webpack output directory structure looks like this:

- webpack.config.js
- web
- <backend_python_app>
- frontend
-- src
-- static
--- webpack
---- scripts
----- app_1
----- app_2

In v3.8.1, I have a vendor bundle located at /static/webpack/scripts/vendor.js which loads an async chunk from static/webpack/<chunkname>.splitbundle.js. However, when I update my configuration and upgrade my Webpack version to v4.43.0, the vendor bundle tries to load the chunk from webpack/<chunkname>.splitbundle.js. Somehow, the earlier version of Webpack was able to dynamically discover (as far as I can tell) that static prefix for the chunk, but the latest version can't. I'm at a loss for how to configure v4.43.0 to replicate this behavior.

v3.8.1 Webpack config:

{
    entry: {<entries>},
    output: {
        filename: "[name].[hash].js",
        chunkFilename: "[name].splitbundle.[hash].js",
        path: path.resolve(__dirname, "static/webpack"),
        publicPath: "webpack/"
    },
    resolve: {
        extensions: [".js", ".json", ".coffee", ".coat", ".ts", ".tsx"],
        alias: {
            "static/images": path.join(__dirname, "./static/images")
        }
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: [
                "base",
                "vendor"
            ],
            filename: "scripts/ts/[name].[hash].js",
            minChunks: Infinity
        })
    ]
}

v4.43.0 Webpack config:

{
    entry: {<entries>},
    output: {
        filename: "[name].[hash].js",
        chunkFilename: "[name].splitbundle.[hash].js",
        path: path.resolve(__dirname, "static/webpack"),
        publicPath: "webpack/"
    },
    resolve: {
        extensions: [".js", ".json", ".coffee", ".coat", ".ts", ".tsx"],
        alias: {
            "static/images": path.join(__dirname, "./static/images")
        }
    }
}

0

There are 0 answers