通过 webpack 使用本地网络字体

Posted 2023-02-22

【中文标题】通过 webpack 使用本地网络字体

【英文标题】：Using local web fonts with webpack

【发布时间】：2017-05-11 04:00:33

【问题描述】：

我正在尝试在我的 React 项目中使用一些本地网络字体。我将它们包含在我的 main.scss 文件中，并通过 webpack 加载它们。包正确构建，包括 main.scss 样式。我看到 webpack 加载字体文件，并将它们复制到 public/fonts/，但我的包文件找不到字体。

据我了解，您的 @font-face src 应该与 bundle 的位置有关。我将其设置为与在 webpack 中加载字体相同的路径，'./fonts/'。我看到的确切错误是：

file:///Users/myusername/Documents/folder1/folder2/folder3/APP/fonts/FoundersGroteskWeb-Regular.woff net::ERR_FILE_NOT_FOUND

我已经尝试了很多不同的路径配置，并在 webpack 中使用了 publicPath 选项，但我现在正在绕圈子，因为这似乎是一个非常简单的参考错误。

文件结构：

APP
├──webpack.config.js
├──src
     ├──app
        ├──App.jsx
        ├──styles
           ├──main.scss
           ├──fonts
              ├──allthefonts.woff
     ├──public
        ├──bundle.js
        ├──fonts
           ├──allthefonts.woff

App.jsx：

require('./styles/main.scss');

ma​​in.scss：

 @font-face 
    font-family: FoundersGrotesk;
    src: url('./fonts/FoundersGroteskWeb-Bold.eot') format('eot'),
         url('./fonts/FoundersGroteskWeb-Bold.woff') format('woff'),
         url('./fonts/FoundersGroteskWeb-Bold.woff2') format('woff2');
    font-weight: bold;


@font-face 
    font-family: FoundersGrotesk_Cnd;
    src: url('./fonts/FoundersGrotXCondWeb-Bold.eot') format('eot'),
         url('./fonts/FoundersGrotXCondWeb-Bold.woff') format('woff'),
         url('./fonts/FoundersGrotXCondWeb-Bold.woff2') format('woff2');
    font-weight: bold;


@font-face 
    font-family: FoundersGrotesk;
    src: url('./fonts/FoundersGroteskWeb-Regular.eot') format('eot'),
         url('./fonts/FoundersGroteskWeb-Regular.woff') format('woff'),
         url('./fonts/FoundersGroteskWeb-Regular.woff2') format('woff2');
    font-weight: normal;

webpack.config.js：

 'use strict';

const webpack = require('webpack');
const PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = 

  entry: './src/app/App.jsx',

  output: 
    path: './src/public/',
    filename: PROD ? 'bundle.min.js' : 'bundle.js'
  ,

  module: 
    loaders: [
      
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        query: 
          presets: ['es2015', 'react', 'stage-1']
        
      ,
      
        test: /\.s?css$/,
        loaders: ['style', 'css', 'sass']
      ,
      
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=./fonts/[name].[ext]'
      
    ]
  
;

【问题讨论】：

不要打扰eot 字体 - 它们仅适用于 IE8 及更低版本，微软在 2016 年 1 月放弃了它。IE9 及以上都支持 WOFF。另一方面：不要将静态资产放入捆绑包中，将它们作为静态内容提供。它为您和您的用户节省了大量带宽，因为静态资产一直并且一直保留到今天，由浏览器缓存。如果您将它们捆绑在一起，您会强制通过网络传输大量未更改的数据，这会花费您的资金、花费您的用户时间，并导致不必要的糟糕体验。

@Mike'Pomax'Kamermans 我可能会误解，但文件加载器不只是将资产从开发目录复制到构建目录，以便捆绑可以轻松引用它们吗？这是我在有关使用图像或字体的文章/SO 帖子中看到的方法，我不知道您将如何使用它们。

如果我们谈论的是github.com/webpack/file-loader，那么：有点，但它也会进行各种时髦的重命名。如果您只需要资产迁移，那么使用cp assets build 会更有意义。你的 JS 代码无论如何都不需要require 静态资产 O_o

【参考方案1】：

感谢@omerts in this thread，得到了一个可行的解决方案。涉及使用 publicPath 的解决方案。我一直试图将它用作 module.exports 中的一个选项，带有字体文件加载器，而不是输出。

更新了 webpack.config.js：

const webpack = require('webpack');
const PROD = JSON.parse(process.env.PROD_ENV || '0');
const path = require('path');

const PATHS = 
  build: path.join(__dirname, './src/public')
;

module.exports = 

  entry: './src/app/App.jsx',

  output: 
    path: PATHS.build,
    filename: PROD ? 'bundle.min.js' : 'bundle.js',
    publicPath: PATHS.build
  ,

  module: 
    loaders: [
      
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        query: 
          presets: ['es2015', 'react', 'stage-1']
        
      ,
      
        test: /\.s?css$/,
        loaders: ['style', 'css', 'sass']
      ,
      
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=/fonts/[name].[ext]'
      ,
      
        test: /\.(jpg|png)$/,
        loader: 'file-loader?name=/fonts/[name].[ext]'
      
    ]
  ,

  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin(
      beautify: false,
      comments: false,
      compress:  
        warnings: false,
        drop_console: true
      ,
      mangle: 
        except: ['$'],
        screw_ie8: true,
        keep_fnames: false
      
    )
  ] : []
;

【参考方案2】：

更好的方法是使用 'url-loader' 并在加载器中添加以下行。

  test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, 
  loader: 'url-loader?limit=100000'

【参考方案3】：

是否可以始终引用原始字体？无论如何，它们似乎不会被文件加载器更改。

文件结构

APP
├───build
│   │   build.js
│   │   build.min.js
│   │
│   └───fonts
│           allthefonts.woff
│
├───css
│       main.css
│
├───fonts
│       allthefonts.woff
│
└───js
        main.js

main.css

@font-face 
  font-family: All-The-Fonts;
  src: url('../fonts/allthefonts.woff') format('woff'); 

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = 
  ...
  output: 
    path: path.resolve(__dirname, 'build'),
    filename: "[name].js",
    globalObject: 'this'
  ,
  module: 
    rules: [
      
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          loader: 'file-loader',
          options: 
            name: '[name].[ext]',
            outputPath: './fonts/' //dont actually use these fonts but still need to process them
          
        ]
      
    ]
  ,
  ...
;

【参考方案4】：

感谢这篇文章：https://www.robinwieruch.de/webpack-font