Typescript项目中Summernote与Webpack集成字体图标异常求助

核心问题 #

Webpack对Summernote依赖的字体资源处理不当，导致字体文件加载失败，控制栏图标无法正常渲染。

具体修复方案 #

1. 配置Webpack处理字体资源 #

确保Webpack能正确识别并打包woff/woff2等字体文件（Webpack 5推荐使用asset-modules，Webpack 4使用file-loader）：

// webpack.config.js
const path = require('path');

module.exports = {
  // 其他配置...
  module: {
    rules: [
      // 处理字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[contenthash][ext]' // 指定输出目录，避免路径冲突
        }
      },
      // 处理CSS文件（确保解析url()引用）
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
};

2. 确保正确引入Summernote资源 #

在TypeScript文件中同时引入Summernote的JS和CSS，避免遗漏样式文件：

// 引入Summernote核心文件
import 'summernote/dist/summernote-lite.css';
import 'summernote';

// 初始化编辑器
document.addEventListener('DOMContentLoaded', () => {
  $('#summernote').summernote({
    // 你的配置项
    height: 300
  });
});

3. 修复CSS路径解析问题 #

如果使用css-loader时出现路径错误，可配置publicPath确保资源引用正确：

// webpack.config.js中css-loader的配置
{
  loader: 'css-loader',
  options: {
    url: true,
    publicPath: '/' // 根据你的部署路径调整，确保字体资源能被正确访问
  }
}

4. 清理缓存与重新构建 #

• 强制刷新浏览器（Ctrl+Shift+R）清除缓存
• 删除Webpack输出目录（默认dist），重新执行构建命令：npm run build或npm run dev

5. 检查开发服务器配置 #

确保Webpack Dev Server允许访问打包后的资源，避免CORS或路径限制：

// webpack.config.js
module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    hot: true,
    open: true
  }
};

内容的提问来源于stack exchange，提问作者Colin Fredericks