Webpack Dev Server - значок значка не отображается на локальном хосте, но работает с внешним URL-адресом

У меня странная проблема, мне было интересно, если кто-нибудь сталкивался с этим. У меня есть веб-пакет в моем приложении для объединения, обслуживания и всего, что между ними. Я заметил, что когда я компилирую и запускаю webpack-devserver из моего файла gulp, все идет так, как ожидалось, и в моем терминале я получаю следующее:

webpack: Compiled successfully.

2017-11-30T11:46:05.288Z - error: 
[Browsersync] Proxying: http://localhost:3001
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3002
    External: http://10.101.51.117:3002
 --------------------------------------
          UI: http://localhost:3003
 UI External: http://10.101.51.117:3003
 --------------------------------------

Теперь, когда я получаю доступ к моему приложению через «localhost», на вкладке браузера для этой страницы не отображается фавикон, в консоли нет 404 и нет запроса на фавикон на вкладке «Сеть инструментов разработчика»? Теперь я должен использовать внешний URL-адрес и ввести http://10.101.51.117:3002 в браузере. там, на вкладке страницы, однако нет запроса на значок значка на вкладке «Сеть инструментов разработчика».

Теперь, когда я делаю прямой вызов в браузере фавикона на http://localhost:3002/assets/favicon.ico значок отображается в окне браузера, поэтому кажется, что сервер связывает значок?

В моем HTML у меня есть тег <link rel="shortcut icon" href="assets/favicon.ico"> ничего странного, а в моем файле webpack.common.js у меня есть следующее (здесь я удалил некоторые элементы для простоты):

module.exports = {
  // lots of things here..
  module: {
    rules: [
    // stuff here has been removed
      {
        test: /\.html$/,
        use: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.(ico)$/,
        use: 'file-loader?name=assets/[name].[ext]'
      },

Я не могу понять, что и почему значок значка не отображается на вкладке, когда я использую URL-адрес локального хоста? Если кто-то сталкивался с этим и решил проблему, буду признателен за совет.

Обратите внимание, что раньше фавикон не кэшировался, так как я изменил имя фавиконки, местоположение и очистил кеш браузера.


webpack-dev-server browser-sync favicon
person Mike Sav    schedule 30.11.2017    source источник

Ответы (4)


arrow_upward
15
arrow_downward

Если вы используете HtmlWebpackPlugin, вы можете включить туда свойство favicon: './src/assets/favicon.ico',.

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html',
      favicon: './src/assets/favicon.ico',
      filename: './index.html',
    }),
  ],

Кстати, начиная с Chrome 80 вы также можете использовать favicon.svg фавиконы.

person Dzintars    schedule 22.02.2020

arrow_upward
3
arrow_downward

Судя по всему, ваш фавикон должен работать, но не работает. Две вещи, которые вы можете попробовать:

  • Кэширование Favicon ОЧЕНЬ неприятно. Я предлагаю вам протестировать свой значок в браузере, который вы обычно не используете (чтобы он не кэшировал ваш значок).
  • Запустите проверку фавикона. Поскольку ваш сайт размещен локально, вам придется использовать ngrok, чтобы сделать его доступным извне.

Раскрытие информации: я автор RealFaviconGenerator

person philippe_b    schedule 02.12.2017

arrow_upward
1
arrow_downward

Я бы использовал загрузчик файлов следующим образом:

Установить пакет

 npm i --save-dev file-loader

Затем добавьте следующее в конфигурацию вашего веб-пакета (по умолчанию webpack.config.js)

{
    test: /\.(png|svg|jpg|gif|ico)$/,
    use: ['file-loader?name=[name].[ext]']
}

Это должно переместить файлы в папку dist.

person wattry    schedule 14.09.2019
comment
Спасибо! это сработало для меня - person yngrdyn; 18.01.2021

arrow_upward
0
arrow_downward

Как насчет копирования favicon.ico с помощью copy-webpack-plugin.

// File: webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  ...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "favicon.ico" },
      ],
    }),
  ]
}

Не забудьте перезагрузить страницу браузера, игнорируя кеши.

person Vlad    schedule 04.07.2021