Webpack 4: how to copy a json file while adding a hash to the name, and link it in index.html

Question

I'm upgrading to Webpack 4 from Webpack 3. In index.html I have the following:

<link rel="manifest" href="<%= require('!file-loader?name=[path][name]-[hash:6].[ext]!static/manifest') %>">

However it had stopped working after the upgrade. The compilation fails saying:

Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = __w...'

Seems like Webpack is trying to parse the json file (possibly twice) which is not what I need (the documentation mentions json files are now being parsed by default). Not sure if this change of behavior in 'require' + file-loader is by design or a bug. Trying to use !!file-loader yields the same result.

Another option could be to use copy-webpack-plugin with [hash] but then how to link to the new name in index.html?

Elhay Avichzer · Answer 1 · 2019-03-07T09:06:18.310

I may found here an answer to your question. use app-manifest-loader and update your require statement:

<link rel="manifest" href="<%= require('manifest.webmanifest') %>">

Then add this rule into your webpack.config.js

{
  test: /(manifest\.webmanifest|browserconfig\.xml)$/,
  use: [
    {
      loader: 'file-loader?name=[path][name]-[hash:6].[ext]'
    },
    {
      loader: "app-manifest-loader"
    }
  ]
}

this loader will also parse the manifest file and will load all icons to with Webpack build to dist folder

The important part here is to change the manifest extension from .json to something else like .webmanifest

Webpack 4: how to copy a json file while adding a hash to the name, and link it in index.html

1 Answers1