Webpack 4: как скопировать файл json при добавлении хэша к имени и связать его с index.html - PullRequest
Новая
       23

Webpack 4: как скопировать файл json при добавлении хэша к имени и связать его с index.html

1 голос
/ 06 марта 2019

Я обновляюсь до Webpack 4 из Webpack 3. В index.html у меня есть следующее: 

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

Однако он перестал работать после обновления. Компиляция не может сказать:

Ошибка синтаксического анализа модуля: неожиданный токен m в JSON в позиции 0 при разборе рядом с 'module.exports = __w ...'

Похоже, Webpack пытается проанализировать файл json (возможно, дважды), а это не то, что мне нужно (в документации упоминается, что файлы json теперь анализируются по умолчанию). Не уверен, что это изменение поведения в 'require' + file-loader вызвано намерением или ошибкой. Попытка использовать !! file-loader дает тот же результат.

Другим вариантом может быть использование copy-webpack-plugin с [hash], но как связать новое имя в index.html?

1 Ответ

1 голос
/ 07 марта 2019

Я могу найти здесь ответ на ваш вопрос.используйте 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

...