字体解码失败和 OTS 解析错误的 Webpack 5 问题
Webpack 5 issues with fonts getting Failed to decode & OTS parsing error
请有人阐明我在使用 Webpack 时遇到的问题。我以前没有使用过 Webpack 的字体,运行 有点头疼我一直无法解决。我正在使用 url().
从 .css 文件中提取字体
在 Webpack 完成它的工作后我得到的是 3 个 .woff 文件,它们的名称更改为类似名称的哈希。然后我有一个字体文件夹,其中包含正确命名的 3 种字体。查看 main.css(Webpack 生成的那个),url() 现在正在查看带有散列名称的字体文件。当我打开名为 .woff 的散列文件时,它的导出命令指向字体文件夹和正确的字体....这是它的工作方式吗?
当我在控制台加载 webpack 时,每个文件都有错误:
无法解码下载的字体:http://localhost/OPM/wpcontent/themes/theme/assets/build/b4f8bd69b3d37cc51e2b.woff
OTS 解析错误:无效的 sfntVersion:1702391919
这是 .woff 文件中的要求
export default __webpack_public_path__ + "fonts/font-icons.woff";
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require( 'cssnano');
const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin');
const JS_DIR = path.resolve(__dirname, 'src/js');
const IMG_DIR = path.resolve(__dirname, 'src/img');
const BUILD_DIR = path.resolve(__dirname, 'build');
const entry ={
main: JS_DIR + '/main.js',
}
const output = {
path: BUILD_DIR,
filename: 'js/[name].js'
};
const rules = [
{
test: /\.js$/,
include: [JS_DIR],
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
},
},
'css-loader',
],
},
/*{
test: /\.(png|jpg\svg\jpeg\gif\ico)$/,
use: [
{
loader:'file-loader',
options:{
name: '[path][name].[ext]',
publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../',
}
}]
},*/
{
test: /\.(woff|woff2)$/,
use: {
loader: 'file-loader',
options:{
name: '[name].[ext]',
//publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../',
outputPath: './fonts/',
}
},
},
];
const plugins = ( argv ) => [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: ( 'production' === argv.mode )
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
];
module.exports = (env, argv) => ({
entry: entry,
output: output,
devtool: 'source-map',
module:{
rules: rules,
},
optimization:{
minimizer:[
/*new OptimizeCssAssetsPlugin({
cssProcessor: cssnano,
}),*/
new UglifyJsPlugin({
cache: false,
parallel: true,
sourceMap: false,
})
]
},
plugins: plugins( argv ),
externals: {
jquery: 'jQuery'
}
});
tl;博士;
use: {
loader: 'file-loader',
上述所有结构都必须替换为 type: asset/resource
(整个 use
块)。
这是我为解决我从事的项目中完全相同的问题所做的工作的示例。
之前:
{
test: /\.eot(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',
},
},
],
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
name: '[name].[ext]',
},
},
],
},
{
test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
name: '[name].[ext]',
},
},
],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml',
name: '[name].[ext]',
},
},
],
},
{
test: /\.(jpe?g|png|gif|ico)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
之后:
{
test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
type: 'asset/resource',
},
file-loader and url-loader have been deprecated and are conflicting with css-loader 6.x.
考虑删除 file-loader
和 url-loader
并使用 Webpack 5 内置的 Asset Modules。
另一个选择可能是坚持css-loader
5.x,但不推荐。
请有人阐明我在使用 Webpack 时遇到的问题。我以前没有使用过 Webpack 的字体,运行 有点头疼我一直无法解决。我正在使用 url().
从 .css 文件中提取字体在 Webpack 完成它的工作后我得到的是 3 个 .woff 文件,它们的名称更改为类似名称的哈希。然后我有一个字体文件夹,其中包含正确命名的 3 种字体。查看 main.css(Webpack 生成的那个),url() 现在正在查看带有散列名称的字体文件。当我打开名为 .woff 的散列文件时,它的导出命令指向字体文件夹和正确的字体....这是它的工作方式吗?
当我在控制台加载 webpack 时,每个文件都有错误: 无法解码下载的字体:http://localhost/OPM/wpcontent/themes/theme/assets/build/b4f8bd69b3d37cc51e2b.woff OTS 解析错误:无效的 sfntVersion:1702391919
这是 .woff 文件中的要求
export default __webpack_public_path__ + "fonts/font-icons.woff";
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require( 'cssnano');
const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin');
const JS_DIR = path.resolve(__dirname, 'src/js');
const IMG_DIR = path.resolve(__dirname, 'src/img');
const BUILD_DIR = path.resolve(__dirname, 'build');
const entry ={
main: JS_DIR + '/main.js',
}
const output = {
path: BUILD_DIR,
filename: 'js/[name].js'
};
const rules = [
{
test: /\.js$/,
include: [JS_DIR],
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
},
},
'css-loader',
],
},
/*{
test: /\.(png|jpg\svg\jpeg\gif\ico)$/,
use: [
{
loader:'file-loader',
options:{
name: '[path][name].[ext]',
publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../',
}
}]
},*/
{
test: /\.(woff|woff2)$/,
use: {
loader: 'file-loader',
options:{
name: '[name].[ext]',
//publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../',
outputPath: './fonts/',
}
},
},
];
const plugins = ( argv ) => [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: ( 'production' === argv.mode )
}),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
];
module.exports = (env, argv) => ({
entry: entry,
output: output,
devtool: 'source-map',
module:{
rules: rules,
},
optimization:{
minimizer:[
/*new OptimizeCssAssetsPlugin({
cssProcessor: cssnano,
}),*/
new UglifyJsPlugin({
cache: false,
parallel: true,
sourceMap: false,
})
]
},
plugins: plugins( argv ),
externals: {
jquery: 'jQuery'
}
});
tl;博士;
use: {
loader: 'file-loader',
上述所有结构都必须替换为 type: asset/resource
(整个 use
块)。
这是我为解决我从事的项目中完全相同的问题所做的工作的示例。
之前:
{
test: /\.eot(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',
},
},
],
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
name: '[name].[ext]',
},
},
],
},
{
test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
name: '[name].[ext]',
},
},
],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml',
name: '[name].[ext]',
},
},
],
},
{
test: /\.(jpe?g|png|gif|ico)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
],
},
之后:
{
test: /\.(jpe?g|svg|png|gif|ico|eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
type: 'asset/resource',
},
file-loader and url-loader have been deprecated and are conflicting with css-loader 6.x.
考虑删除 file-loader
和 url-loader
并使用 Webpack 5 内置的 Asset Modules。
另一个选择可能是坚持css-loader
5.x,但不推荐。