logo标签列表

使用Webpack加载本地Web字体

cssfontssasswebpack
18

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

据我所知，@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');

main.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]'
      }
    ]
  }
};
5
不必烦恼eot字体 - 它们仅适用于IE8及以下版本，这些版本已在2016年1月被微软放弃。 IE9及以上版本都支持WOFF。另外一点：不要将静态资源放入您的程序包中，应该作为静态内容提供服务。这样可以节省您和用户大量的带宽，因为静态资源一直以来都可以并且现在仍然可以被浏览器缓存。如果您将它们捆绑在一起，就会强制传输未经更改的大量数据，这会浪费您的金钱、用户的时间，并导致不必要的差劲体验。 - Mike 'Pomax' Kamermans
2
@Mike'Pomax'Kamermans，我可能误解了，但是file-loader不只是将资产从开发目录复制到构建目录，以便捆绑包可以轻松地引用它们吗？这是我在有关图像或字体处理的文章/ SO帖子中看到的方法，否则我不知道你会如何使用它们。 - johnjohn
如果我们谈论的是 https://github.com/webpack/file-loader，那么：有点像，但它也会进行各种奇怪的重命名。如果你只需要重新定位资源，使用 cp assets build 更加合理。你的 JS 代码不应该需要 require 静态资源。O_o - Mike 'Pomax' Kamermans
4个回答
13

在此线程中，得到了@omerts提供的有效解决方案。 解决方案涉及使用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
2
更好的方法是使用 'url-loader'，并在加载器中添加以下行。
{
  test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, 
  loader: 'url-loader?limit=100000'
}
2

是否可能始终引用原始字体？无论如何，它们似乎都不会被file-loader更改。

文件结构

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
          }
        }]
      }
    ]
  },
  ...
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接