Webpack 5 字体解码失败和 OTS 解析错误的问题

Question

请有人解释一下我在使用 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'
    }
});

Answer 1

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 和 url-loader 已被弃用，并且与 css-loader 6.x 冲突。

考虑删除 file-loader 和 url-loader 并使用 Webpack 5 中内置的 Asset Modules。

另一种选择可能是坚持使用css-loader 5.x，但不推荐。