1

I have a script that launches WebpackDevServer & Puppeteer to create SSR files (HTML) for my site, and at the same time generate the assets (JS, CSS, etc).

However, for some reason, the generated HTML files point to files with a contenthash that is different than the actual assets contenthash, causing the site to crash.

For example, in the HTML it's looking for:

<script src="/runtime.c38074e6351612e357ee.js"></script>

But the actual file receives the name:

runtime.4f1783b6674757f40b7c.js

Here's a simplified version of my WebPack config:

{
    entry: '/index.js',
    mode: 'production',
    output: {
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].js',
        path: 'build/',
        publicPath: '/',
    },
    optimization: {
        minimize: true,
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
    },
    devServer: {
        writeToDisk: true,
        contentBase: 'src/',
        historyApiFallback: true,
        compress: true,
        port: 9000,
        hot: true,
        inline: true,
    },
    // ...
}
Yoav Kadosh
  • 4,807
  • 4
  • 39
  • 56

1 Answers1

0

Turns out the reason for the mismatch was some absolute paths generated by some of the plugins/loaders.

Since webpack-dev-server serves the files from a location that is different from the build folder, the absolute paths were different, and therefore the [contenthash] was different.

This issue was raised to the Webpack team, and to some of the plugin/loader developers, and they fixed it by using relative paths.

Upgrading to the latest webpack/plugins/loaders versions fixed the issue.

Yoav Kadosh
  • 4,807
  • 4
  • 39
  • 56