1

I am trying (for what feels like the 100th time :)) to upgrade to Webpack 5. Everything worked perfectly fine in Webpack 4, so I assume there is some setting of setting I have missed but cant seem to find it.

It is currently failing on absolute path recognition. E.g. I have some links / images that specify absolute paths (for when deployed)

Some of the Webpack errors I am seeing

Module not found: Error: Can't resolve '/manifest.json' in 'C:\Projects\xyz\xyz\src'
Module not found: Error: Can't resolve '/assets/images/logos/xyz-icon.png' in 'C:\Projects\xyz\xyz\src'

Use in Index.html

<link rel="manifest" href="/manifest.json">

Use in a component (Note I tried with and without the ~)

<img src="~/assets/images/logos/xyz-logo-white.png" class="group-logo" alt="Group Logo" />

I'm a bit lost on what to do, here are a few things I have tried with no success

Added a file-loader rule for images.

{
    test: /\.(png|jpg|jpeg|gif)$/,
    loader: 'file-loader'
},

Added a resolve path for my dist (target) folder

resolve: {
    extensions: ['.js', '.ts'],
    plugins: [new TsconfigPathsPlugin()],
    modules: [
        path.resolve(__dirname, 'node_modules'),
        sourcePath,
        distPath
    ],
    fallback: { "util": false }
},
Chris
  • 26,744
  • 48
  • 193
  • 345

1 Answers1

1

file-loader and url-loader are deprecated from now you have to use assets/resources which is available in webpack 5 https://webpack.js.org/guides/asset-modules/

ossr
  • 41
  • 4