时间戳

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

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

问题描述

我正在从 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 会产生相同的结果。

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

标签： jsonwebpackhashwebpack-4webpack-file-loader

解决方案

我可能会在这里找到您问题的答案。使用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

推荐阅读