Блог

Я получаю 404 в своем favicon.ico файле и не совсем уверен, как лучше всего это обойти.

Я устанавливаю значок значка в своем HtmlWebpackPlugin , он получает актив и выводит его просто отлично.

 new HtmlWebpackPlugin({
   template: './index.html',
   favicon: 'favicon.ico',
   filename: '../index.html',
   chunks: ['runtime', 'index'],
   xhtml: true
}),
 

Мой вывод, не является значением по умолчанию, это путь к target/webapp/app/ , это не может быть изменено;

 output: {
   publicPath: ASSET_PATH,
   filename: '[name].[hash].js',
   chunkFilename: '[name].[hash].[chunkhash].chunk.js',
   path: path.resolve(__dirname, 'target/webapp/app/')
},
 

Я также использую CopyWebpackPlugin для добавления favicon.ico в то target/webapp , куда index.html выводится вывод.

 new CopyWebpackPlugin([
   { from: '../webapp/**/*', to: '../' },
   { from: 'fragments', to: '../fragments' },
   { from: 'favicon.ico', to: '../favicon.ico' },
]),
 

У меня также есть загрузчик файлов файла ico, на всякий случай

 {
   test: /.(png|svg|jpg|gif|ico)$/,
   exclude: /app/og-images/,
   use: [
      'file-loader'
   ]
},
 

Это структура target/webapp/ выглядит следующим образом;

  -- app
|  -- favicon.ico
|  -- index.js
|  -- index.css
|  -- runtime.js
 -- fragments
 -- index.html
 -- favicon.ico
 

В скомпилированном index.html файле есть следующее;

 <link rel="shortcut icon" href="favicon.ico"/>
 

Но это дает мне 404 балла.

Однако, если я вручную отредактирую скомпилированный index.html файл, чтобы

 <link rel="shortcut icon" href="./app/favicon.ico"/>
 

Это работает.

Попадание http://localhost:8080/favicon.ico дает мне 404, но http://localhost:8080/app/favicon.ico работает нормально.