我正在尝试在 Typescript 项目中同时使用 Summernote 和 Webpack。 (没有 React 或 Vue 或 Angular 或任何东西。)我可以用它来创建编辑器,但控制条的图标显示为无用的小框。
错误信息:
Failed to decode downloaded font: http://localhost:4000/bc4806b8745111d7ee9d.woff2
downloadable font: rejected by sanitizer (font-family: "summernote" style:normal weight:400 stretch:100 src index:1) source: http://localhost:4000/bc4806b8745111d7ee9d.woff2
这里有一篇大约 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”,那就是该项目的名称。
非常感谢@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 发生冲突。