webpack 字体无法解析

Posted 2023-02-22

【中文标题】webpack 字体无法解析

【英文标题】：webpack font can't resolve

【发布时间】：2017-11-09 08:40:42

【问题描述】：

我正在尝试在我的 webpack 中包含字体文件，但有点困难。

font.css

@font-face 
    font-family: 'LatoBlack';
    src: url('./font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('./font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('./font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;

Webpack.base.Config

module.exports = 
  module: 
    loaders: [
       test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=./font/[name].[ext]' ,
       test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=./font/[name].[ext]' ,
       test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=./font/[name].[ext]' ,
       test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=./font/[name].[ext]' ,
       test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=./font/[name].[ext]' 
    ]
  
;

结构

webpack.prod.conf

module.exports = new Config().extend('./webpack.base.config.js').merge(
  entry: [
    './src/index.js'
  ],
  devtool: 'eval',
  plugins: [
    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: JSON.stringify('production')
      
    )
  ],
  output: 
    filename: 'main.js',
    path: path.join(__dirname, 'app/www'),
    publicPath: '/app/www'
  ,
);

错误

ERROR in ./~/css-loader?"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[local]_[hash:base64:5]"!./~/postcss-loader?sourceMap&parser=postcss-scss!./src/components/shared/main.css
Module not found: Error: Can't resolve './font/Lato-ThinItalic.ttf' in '/var/www/kindred/src/components/shared'
 @ ./~/css-loader?"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[local]_[hash:base64:5]"!./~/postcss-loader?sourceMap&parser=postcss-scss!./src/components/shared/main.css 6:5744-5781
 @ ./src/components/shared/main.css
 @ ./src/index.js
 @ multi ./src/index.js

webpack.base.config

/* eslint-disable filenames/match-regex, import/no-commonjs, import/unambiguous */

const path = require('path');
const environment = require('webpack-config');

module.exports = 
  module: 
    loaders: [
      
        test: /dashjs\/dist\/.*/,
        loader: 'file-loader',
        options: 
          name: '[name].[ext]'
        
      ,
      
        test: /\.js$/,
        exclude: /node_modules\/.*/,
        use: ['babel-loader']
      ,
      
        test: /\.(jpg|png)$/,
        loader: 'url?limit=25000'
      ,
      
        test: /\.svg$/,
        use: ['babel-loader', 'svg-react-loader']
      ,
      
        test: /\.css$/,
        use: [
          'style-loader',
          
            loader: 'css-loader?sourceMap',
            query: 
              modules: true,
              sourceMap: true,
              importLoaders: 2,
              localIdentName: environment.get('cssIdent')
            
          ,
          'postcss-loader?sourceMap&parser=postcss-scss'
        ],
      ,
      // Font Definitions
       test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=./font/[name].[ext]' ,
       test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=./font/[name].[ext]' ,
       test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=./font/[name].[ext]' ,
       test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=./font/[name].[ext]' ,
       test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=./font/[name].[ext]' 
    ]
  
;

那么我怎样才能让它加载呢？ :O

【参考方案1】：

由于有相对的 webpack 无法根据其当前位置找到。在模块规则中添加这个并安装文件加载器

npm install --save-dev file-loader

        test: /\.(svg|eot|ttf|woff|woff2)$/,
        use:'file-loader',
        options: 
            name: 'images/[name].[hash].[ext]'
       

,

编辑： 通常相对url可以通过三种方式解决

-使用绝对路径

-使用选项并将 url 设置为 false

use:[
        
            loader: 'css-loader',
            options: url: false
        
    ]

-使用原始加载器，因为它将加载 url 作为字符串

use: ['raw-loader', 'css-loader'],

【讨论】：

谢谢朋友，但是我仍然遇到与以前相同的错误，但我的css 文件中没有任何更改。

谢谢朋友，我刚刚有时间解决这个问题。请查看更新问题

【参考方案2】：

Webpack 5 或更高版本

不需要任何加载器安装，只需添加webpack.config.js即可。

   module: 
    rules: [
      
       test: /\.(woff|woff2|eot|ttf|otf)$/i,
       type: 'asset/resource',
      ,
    ],
  ,

【讨论】：

似乎不起作用，你能解释一下答案吗？

嗨 NickN.，在 webpack-5 之前我们需要安装加载器，然后使用它们才能使用字体。因为 webpack 只读取 javascript，对于所有其他类型的文件我们需要使用加载器。 (CSS, PNG)...从 webpack5 开始，我们不需要安装任何加载器来加载（使用）webpack 中的字体。您需要添加我之前编写的规则，然后导入字体并添加@font-face。你可以在这里找到它：webpack.js.org/guides/asset-management/#loading-fonts

这是 webpack5 的首选方法。请务必使用 SASS 文件中字体资源的绝对路径。