0

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")
        }
    }
}
flimsy
  • 204
  • 1
  • 10
  • Have you tried changing `publicPath` as `static/webpack/` in `webpack v4` config file? – Prathap Reddy Jul 15 '20 at 18:44
  • I could potentially get it working that way, but `static` can change based on environment, so I'd have to pass in the value from the ENV, which is possible but annoying in our setup. I was hoping there was a way to just get Webpack 4 to behave like 4. – flimsy Jul 15 '20 at 20:51

0 Answers0