反应应用程序图标/清单未显示在gh页面上

Posted 2023-02-22

【中文标题】反应应用程序图标/清单未显示在gh页面上

【英文标题】：react app favicon / manifest not being displayed on gh-pages

【发布时间】：2019-04-28 21:59:51

【问题描述】：

我在 gh-pages 上托管了 react/webpack 应用程序。 Favicon 和 Manifest 图标未显示。

favicons、manifest 文件夹和 manifest.webmanifest 文件放在 client/assets 文件夹中。

,

app.js

导入'./assets/favicons/favicon.ico';

Webpack.config

 test: /\.(jpe?g|png|gif|ico)$/,
            loader: 'file-loader',
            options: 
              name: devMode ? '[name].[ext]' : '[name].[hash].[ext]',
            ,

new htmlWebpackPlugin(
      template: './public/index.html',
      favicon: './client/assets/favicons/favicon.ico',
    ),

index.html

index.html

webpack 配置

[版本] 我添加了 CopyWebpackPlugin 以将 manifest 文件夹和 manifest.json 复制到 dist 文件夹。现在 Manifest.json 文件有效。但图标仍未显示在主屏幕上。

webpack.base.js

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const  BundleAnalyzerPlugin  = require('webpack-bundle-analyzer');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const NODE_ENV = process.env.NODE_ENV;
const devMode = NODE_ENV !== 'production';
const isTest = NODE_ENV === 'test';

const babelConfig = require('./.babelrc.js');

module.exports = 
  output: 
    filename: devMode ? 'bundle.js' : 'bundle.[hash].js',
    chunkFilename: devMode
      ? '[name].lazy-chunk.js'
      : '[name].lazy-chunk.[hash].js',
    path: path.resolve(__dirname, 'public/dist'),
    publicPath: '/',
  ,
  resolve:  extensions: ['.js', '.jsx', '.json'] ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          
            loader: 'babel-loader',
            options: babelConfig,
          ,
        ],
      ,
      
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
          
            loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          ,
          
            loader: 'css-loader',
            options: 
              sourceMap: true,
              importLoaders: 1,
            ,
          ,
          
            loader: 'postcss-loader',
            options: 
              indent: 'postcss',
              plugins: [
                autoprefixer(
                  browsers: 'last 2 versions',
                ),
              ],
              sourceMap: true,
            ,
          ,
          
            loader: 'sass-loader',
            options: 
              sourceMap: true,
              includePaths: ['client/styles/main.scss'],
            ,
          ,
        ],
      ,
      
        test: /\.html$/,
        loader: 'html-loader',
        options: 
          attrs: ['img:src'],
        ,
      ,
      
        test: /\.(jpe?g|png|gif|ico)$/,
        loader: 'file-loader',
        options: 
          name: devMode ? '[name].[ext]' : '[name].[hash].[ext]',
        ,
      ,
      
        test: /\.svg$/,
        loader: 'file-loader',
        options: 
          name: devMode ? '[name].[ext]' : '[name].[hash].[ext]',
        ,
      ,
    ],
  ,
  optimization: 
    splitChunks: 
      chunks: 'all',
      cacheGroups: 
        vendors: 
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        ,
        default: 
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        ,
      ,
    ,
  ,
  plugins: [
    new CleanWebpackPlugin(['public/dist']),
    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: JSON.stringify(NODE_ENV),
      ,
    ),
    new HTMLWebpackPlugin(
      template: './public/index.html',
      favicon: './static/favicons/favicon.ico',
    ),
    new MiniCssExtractPlugin(
      filename: devMode ? '[name].css' : '[name].[chunkhash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[chunkhash].css',
    ),
    new CaseSensitivePathsPlugin(),
    new CopyWebpackPlugin([
       from: `$__dirname/static`, to: `$__dirname/public/dist` ,
    ]),
    isTest
      ? new BundleAnalyzerPlugin(
          generateStatsFile: true,
        )
      : null,
  ].filter(Boolean),
;

webpack.prod.js

const merge = require('webpack-merge');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');
const TerserPlugin = require('terser-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');
const baseConfig = require('./webpack.base');

const config = 
  mode: 'production',
  entry: './client/index.js',
  devtool: 'source-map',
  optimization: 
    minimize: true,
    minimizer: [
      new OptimizeCssAssetsPlugin(
        assetNameRegExp: /\.optimize\.css$/g,
        cssProcessor: cssnano,
        cssProcessorOptions: 
          discardComments:  removeAll: true ,
        ,
        canPrint: true,
      ),
      new TerserPlugin(
        test: /\.js(\?.*)?$/i,
        exclude: /node_modules/,
        terserOptions: 
          ecma: 6,
          compress: true,
          output: 
            comments: false,
            beautify: false,
          ,
        ,
      ),
    ],
    runtimeChunk: 
      name: 'manifest',
    ,
  ,
  plugins: [new BrotliPlugin()],
;

module.exports = merge(config, baseConfig);

【问题讨论】：

如果你想在浏览器上显示图标。请尝试在index.html <link rel="shortcut icon" href="%PUBLIC_URL%/assets/favicons/favicon.ico"> 中执行此操作

@Jin 谢谢！那简直行得通！我在 manifest.webmanifest 中尝试了同样的事情，但仍然没有显示。

【参考方案1】：

如果你想在浏览器上显示图标。请尝试在 index.html 中执行此操作

<link rel="shortcut icon" href="%PUBLIC_URL%/assets/favicons/favicon.ico">