AG网格React图标升级后无法正常显示

Question

我们最近从ag grid 20.1.0升级到23.0.2。我们使用webpack来捆绑我们的代码，自从升级后，当我们在 "生产 "模式下构建我们的代码时，图标不能正确显示（见下图）。

如果我们在本地的 "开发 "模式下运行，就不会出现问题。在阅读一些变化日志时，看起来ag grid从svg图标变成了webfonts，看起来图标现在被嵌入到css中......至少这是我的理解。很明显，这与我们配置webpack的方式有关，但我实在想不出我做错了什么。下面是我们的webpack.config.js。我们使用的是Sencha Extreact工具集，但到目前为止这还不是问题。

require('dotenv').config()
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtWebpackPlugin = require('@sencha/ext-webpack-plugin');
const portfinder = require('portfinder');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = function (env) {
  function get(it, val) {if(env == undefined) {return val} else if(env[it] == undefined) {return val} else {return env[it]}}

  var profile     = get('profile',     '')
  var environment = get('environment', 'development')
  var treeshake   = get('treeshake',   'no')
  var browser     = get('browser',     'yes')
  var watch       = get('watch',       'yes')
  var verbose     = get('verbose',     'no')
  var useConfig   = get('useConfig',  'default')

  const isProd = environment === 'production'
  const outputFolder = 'build'
  portfinder.basePort = (env && env.port) || 8080

  return portfinder.getPortPromise().then(port => {
    const plugins = [
      new webpack.EnvironmentPlugin({
        NODE_ENV: environment, // use 'development' unless process.env.NODE_ENV is defined
      }),
      new HtmlWebpackPlugin({template: "index.html",hash: true,inject: "body"}),
      new HtmlWebpackPlugin({template: "../silent_renew/silent_renew.html", filename: "silent_renew.html", inject: 'body'}),
      new ExtWebpackPlugin({
        framework: 'react',
        toolkit: 'modern',
        theme: 'gt-theme',
        emit: 'yes',
        script: '',
        port: port,
        packages: [
          'treegrid',
          'd3'
        ],
        profile: profile, 
        environment: environment,
        treeshake: treeshake,
        browser: browser,
        watch: watch,
        verbose: verbose
      }),
      new CopyWebpackPlugin([
        { from: 'web.config' },
        { from: './_assets/icons/inv.png', to: 'resources/images' },
      ])
    ]
    return {
      mode: environment,
      devtool: (environment === 'development') ? 'inline-source-map' : false,
      context: path.join(__dirname, './src'),
      entry: {
          app: './index.js',
          silentRenew: "../silent_renew/index.js"
      },
      output: {
        path: path.join(__dirname, outputFolder),
        filename: "[name].js"
      },
      plugins: plugins,
      module: {
        rules: [
          { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader'] },
          { test: /\.(html)$/,use: { loader: 'html-loader' } },
          {
            test: /\.(css|scss)$/,
            use: [
              {
                loader: 'style-loader'
              },
              {
                loader: 'css-loader'
              },
              {
                loader: 'sass-loader'
              }
            ]
          },
          {
            test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: './assets/fonts/[name].[ext]',
                    limit: 100000,
                }
            }]
          },
          {
              test: /\.(png|jpg)$/,
              loader: 'url-loader',
              options: {
                  name: './assets/icons/[name].[ext]',
                  limit: 100000,
              }
          }
        ]
      },
      externals: {
        'Config': (useConfig === 'default' ? JSON.stringify(require('./config.json')) 
                                          : JSON.stringify(require('./config.localapi.json')))
      },
      performance: { hints: false },
      stats: 'none',
      optimization: { noEmitOnErrors: true },
      node: { fs: 'empty' },
      devServer: {
        contentBase: outputFolder,
        hot: !isProd,
        historyApiFallback: true,
        host: '0.0.0.0',
        port: port,
        disableHostCheck: false,
        compress: isProd,
        inline:!isProd,
        stats: 'none'
      }
    }
  })
}

更新一下。

一些额外的信息，在20.1.0的时候，我们使用下面的导入语句来导入css。

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-material.css';

在23.0.2中，我们现在导入如下。

import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-material.css';

我试过解决config:

resolve: {
        alias: {
            "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'),
            react: path.resolve('./node_modules/react')
        },
        extensions: ['.js', '.jsx']
      },

但似乎没有什么用处。

Answer 1

经过无数个小时的努力，我们终于找到了问题的症结所在，我只需要添加以下内容 <meta charset="utf-8" /> 在我的index.html中 <head> 并喜欢所有的图标出现预期的。