Summernote 和 Webpack 字体问题

Question

我正在尝试在 Typescript 项目中同时使用 Summernote 和 Webpack。 （没有 React 或 Vue 或 Angular 或任何东西。）我可以用它来创建编辑器，但控制条的图标显示为无用的小框。

错误信息：

• Chrome 说：

  Failed to decode downloaded font: http://localhost:4000/bc4806b8745111d7ee9d.woff2

• Firefox 说：

  downloadable font: rejected by sanitizer (font-family: "summernote" style:normal weight:400 stretch:100 src index:1) source: http://localhost:4000/bc4806b8745111d7ee9d.woff2

• Safari 没有提及任何有关字体的信息，但问题也发生在那里。

这里有一篇大约 4.5 年前的帖子（如何修复“可下载字体：被消毒剂拒绝”），说字体可能无效或已损坏，所以我抓住了新副本（不走运），卸载并通过 Summernote 重新安装npm（没有运气），然后切换到yarn（没有运气），并尝试通过转换器运行它们（没有抱怨，但也没有解决问题）。 https://fontdrop.info/ 也非常满意，所以我真的认为这不是字体有效性问题。

我在这里检查了其他 Summernote 和 Webpack 线程，不幸的是，它们都给出了与我看到的不同的错误消息。

知道还会发生什么吗？

这是我的 webpack 配置文件：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: "css-loader" },
          { loader: "postcss-loader" },
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "images",
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "font",
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      jquery: path.resolve(__dirname, "node_modules/jquery"),
      jQuery: path.resolve(__dirname, "node_modules/jquery"),
    },
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Ecrivaine",
      template: "src/custom.html",
    }),
    new MiniCssExtractPlugin({
      filename: "bundle.css",
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      CodeMirror: "codemirror",
    }),
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
  },
  watch: true,
  watchOptions: {
    aggregateTimeout: 600,
    poll: 2000,
    ignored: "**/node_modules",
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    compress: true,
    port: 4000,
  },
};

还有package.json：

{
  "name": "ecrivaine",
  "version": "1.0.0",
  "description": "The online ebook editor",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "develop": "webpack-dev-server --mode development",
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [
    "ebook",
    "editor",
    "typescript",
    "webpack"
  ],
  "author": "Colin Fredericks",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.24.4",
    "@popperjs/core": "^2.11.8",
    "@types/bootstrap": "^5.2.10",
    "@types/codemirror": "^5.60.15",
    "@types/summernote": "^0.8.10",
    "bootstrap": "^5.3.3",
    "codemirror": "^5.65.16",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "postcss": "^8.0.1",
    "summernote": "^0.8.20",
    "typescript": "^5.4.5"
  },
  "devDependencies": {
    "@types/jquery": "^3.5.29",
    "autoprefixer": "^10.4.19",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.1",
    "css-minimizer-webpack-plugin": "^6.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.9.0",
    "postcss-loader": "^8.1.1",
    "sass": "^1.75.0",
    "sass-loader": "^14.2.1",
    "ts-loader": "^9.5.1",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }
}

这是非常简单的部分，我实际上是在调用 Summernote

$(".summernote").summernote({
  height: 300,
  codemirror: {
    theme: "monokai",
  },
});

如果您看到“ecrivaine”，那就是该项目的名称。

Answer 1

非常感谢@herrstrietzel 的回答。这是我的最终 webpack.config.js 的样子：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/i,
        type: "asset/resource",
      },
      {
        test: /\.ts?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: "css-loader" },
          { loader: "postcss-loader" },
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      jquery: path.resolve(__dirname, "node_modules/jquery"),
      jQuery: path.resolve(__dirname, "node_modules/jquery"),
    },
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Ecrivaine",
      template: "src/custom.html",
    }),
    new MiniCssExtractPlugin({
      filename: "bundle.css",
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      CodeMirror: "codemirror",
    }),
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
  },
  watch: true,
  watchOptions: {
    aggregateTimeout: 600,
    poll: 2000,
    ignored: "**/node_modules",
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    compress: true,
    port: 4000,
  },
};

如果有人对 Summernote 上的 menus 在此设置中无法工作有疑问，那实际上是与 Bootstrap 5 发生冲突，而不是与 Webpack 发生冲突。