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

【问题标题】：Webpack 4: how to copy a json file while adding a hash to the name, and link it in index.htmlWebpack 4：如何在向名称添加哈希的同时复制 json 文件，并将其链接到 index.html
【发布时间】：2019-07-28 05:53:39
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： json webpack hash webpack-4 webpack-file-loader

【解决方案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 构建到 dist 文件夹中

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

【讨论】：