图标不会显示，似乎是 webpack 的问题

Favicon won't show, seems to be issue with webpack

本文关键字：webpack 问题 似乎是 显示 图标      更新时间：2023-09-26

我有一个 React/Redux 应用程序，我正在使用 webpack 来转译我的 JSX 和 ES6，并将我的样式表和图像加载到我的 JS 中。我的开发服务器托管在端口 3000 上。

这是我的webpack.config.js：

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      favicon: 'src/images/favicon.ico'
    })
  ],
  module: {
    loaders: [{
      test: /'.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /'.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
    },
    {
      test: /'.(otf|eot|svg|ttf|woff|woff2)('?v=[0-9]'.[0-9]'.[0-9])?$/,
      loaders: [ 'url' ],
      include: __dirname
    },
    {
      test: /'.(png|ico|gif)?$/,
      loaders: [ 'file' ],
      include: __dirname
    }]
  }
};

当我点击 localhost：3000 时，除了我的网站图标之外，我期望在那里的所有东西都在那里。如果我去localhost：3000/static/favicon.ico，我的网站图标就在那里。可以使用一些专业知识来调试此问题。

浏览器将在 localhost:3000/favicon.ico 中查找您的图标，所以这就是它需要的地方。尝试重写网址，以便为/favicon.ico路由提供favicon.ico。例如，如果您使用的是 historyApiFallback，请执行以下操作：

historyApiFallback: {
    rewrites: [
        // shows favicon
        { from: /favicon.ico/, to: '[path/to/favicon]' }
    ]
}
相关文章：