SPFX应用加载DevExtreme DataGrid时Webpack处理器加载失败求助

我在SPFX应用里尝试使用DevExtreme DataGrid，但始终无法正确配置Webpack加载器。参考相关问题后，在module.exports里试过多种配置方式都没解决问题。

当前gulpfile.js内容 #

'use strict';

const build = require('@microsoft/sp-build-web');
//const path = require('path');

module.exports = {
  module: {
    rules:[
      { 
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff|woff2|ttf|eot)$/,
        use: 'file-loader?name=fonts/[name].[ext]!static'
      }
    ]
  }
}

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));
build.tslintCmd.enabled = false;

package.json依赖信息 #

{
  "name": "search-based-list-view-webpart",
  "version": "0.0.2",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@devexpress/dx-react-core": "^3.0.4",
    "@devexpress/dx-react-grid": "^3.0.4",
    "@devexpress/dx-react-grid-material-ui": "^3.0.4",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@microsoft/rush-stack-compiler-4.2": "^0.1.2",
    "@microsoft/sp-core-library": "1.14.0",
    "@microsoft/sp-lodash-subset": "1.14.0",
    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
    "@microsoft/sp-property-pane": "1.14.0",
    "@microsoft/sp-webpart-base": "1.14.0",
    "@mui/material": "^5.9.0",
    "@pnp/graph": "^3.4.1",
    "@pnp/sp": "^3.4.1",
    "@pnp/spfx-controls-react": "3.8.1",
    "devextreme": "22.1.3",
    "devextreme-react": "22.1.3",
    "office-ui-fabric-react": "7.174.1",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
    "@microsoft/sp-build-web": "1.14.0",
    "@microsoft/sp-module-interfaces": "1.14.0",
    "@microsoft/sp-tslint-rules": "1.14.0",
    "@types/react": "16.9.51",
    "@types/react-dom": "16.9.8",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "gulp": "~4.0.2",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1"
  }
}

CSS导入方式 #

在.tsx文件中导入DevExtreme样式：

import 'devextreme/dist/css/dx.light.css';

报错信息 #

执行gulp serve时出现以下错误：

Error - [webpack] 'dist':
./node_modules/devextreme/dist/css/icons/dxicons.woff2 1:4
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./node_modules/devextreme/dist/css/dx.light.css (./node_modules/@microsoft/spfx-heft-plugins/node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./node_modules/devextreme/dist/css/dx.light.css) 4:38-70
 @ ./node_modules/devextreme/dist/css/dx.light.css
 @ ./lib/webparts/searchBasedListViewWebpart/components/SearchBasedListViewWebpart.js
 @ ./lib/webparts/searchBasedListViewWebpart/SearchBasedListViewWebpartWebPart.js

解决方法 #

问题根源是SPFX的Webpack配置会覆盖自定义导出的配置，且字体加载器的配置格式不符合SPFX的扩展规则，按以下步骤修改：

1. 调整gulpfile.js的Webpack配置方式
   SPFX不能直接通过module.exports导出Webpack配置，必须用build.configureWebpack方法扩展原有配置，替换原文件中的module.exports部分：

'use strict';

const build = require('@microsoft/sp-build-web');
const path = require('path');

// 扩展Webpack配置
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    // 添加字体文件加载规则
    generatedConfiguration.module.rules.push(
      {
        test: /\.(woff|woff2|ttf|eot|svg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }
      }
    );

    // 确保CSS加载规则包含所需loader
    const cssRule = generatedConfiguration.module.rules.find(rule => rule.test.test('.css'));
    if (cssRule && !cssRule.use.includes('style-loader')) {
      cssRule.use.push('style-loader');
    }

    return generatedConfiguration;
  }
});

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));
build.tslintCmd.enabled = false;

2. 清理并重新构建项目
   执行以下命令：

gulp clean
gulp build
gulp serve

3. 验证依赖完整性
   如果仍有问题，重新安装相关loader确保版本匹配：

npm install css-loader style-loader file-loader --save-dev

内容的提问来源于stack exchange，提问作者Suhas Yerramsetty