Webpack打包：如何将字体资源重定向到自定义文件夹？-js教程-PHP中文网

Webpack打包：如何将字体资源重定向到自定义文件夹？

碧海醫心

发布： 2025-03-02 13:50:42

原创

510人浏览过

webpack打包：如何将字体资源重定向到自定义文件夹？

Webpack 5字体资源打包：自定义文件夹及路径更新

在Webpack项目打包过程中，常常需要将字体文件整理到指定的文件夹。本文介绍如何利用Webpack 5配置，将所有字体资源打包到custom_fonts文件夹，并自动修正CSS文件中字体文件的引用路径。

问题：开发者使用file-loader将字体输出到fonts/目录，但CSS文件仍引用旧路径，导致custom_fonts/中的字体无法正常加载。这是因为file-loader只改变了文件输出路径，未修改CSS中的引用路径。

解决方案：结合file-loader和resolve-url-loader解决此问题。file-loader负责移动字体文件到custom_fonts，resolve-url-loader负责解析CSS中的URL，将相对路径转换为正确的路径。

稿定PPT

海量PPT模版资源库

111

查看详情

修改后的Webpack配置如下：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  resolve: {
    extensions: ['.ts', '.js', '.scss', '.css']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]',
              outputPath: 'custom_fonts/', 
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 2 } },
          'resolve-url-loader', 
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ]
};

登录后复制

关键点：将file-loader的outputPath设置为custom_fonts/，并在Sass加载器中添加resolve-url-loader。resolve-url-loader会在编译时解析CSS中的URL，根据file-loader设置的路径自动更新字体引用路径，确保CSS正确引用custom_fonts/下的字体文件。最终，字体文件将被正确地移动到custom_fonts文件夹，CSS中的引用路径也会被自动修正。

以上就是Webpack打包：如何将字体资源重定向到自定义文件夹？的详细内容，更多请关注php中文网其它相关文章！