Webpack 4：如何在向名称添加哈希的同时复制json文件，并将其链接到index.html

Question

我正在从Webpack 3升级到Webpack 4.在index.html中，我有以下内容：

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

但升级后它已停止工作。编译失败说：

模块解析失败：在'module.exports = __w ...'附近解析时，位置0的JSON中出现意外的标记m

好像Webpack试图解析json文件（可能两次），这不是我需要的（文档提到json文件现在默认被解析）。不确定'require'+ file-loader中的行为更改是设计还是错误。尝试使用!! file-loader会产生相同的结果。

另一种选择可能是使用带有[hash]的copy-webpack-plugin但是如何链接到index.html中的新名称？

Answer 1

我可能会在你的问题上找到here an answer。使用app-manifest-loader并更新你的require声明：

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

然后将此规则添加到您的webpack.config.js中

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

此加载程序还将解析清单文件，并将所有图标加载到Webpack build到dist文件夹

这里的重要部分是将清单扩展从.json更改为其他类似.webmanifest