javascript - webpack 构建中未加载字体

Question

当构建过程看起来运行良好时，字体不会在浏览器上呈现。 Webpack 正确地将字体文件移动到 public/fonts 目录。构建的 css 文件显示字体文件的正确路径。

这是加载器配置:

{
    test: /\.s?css$/,
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
},
{
    test: /\.(eot|svg|ttf|woff|woff2)/,
    loader: 'file?name=../fonts/[name].[ext]'
},
{
    test: /\.(png|jpg|gif)$/,
    loader: "url-loader?limit=100000"
}

这是构建输出:

                                     Asset     Size  Chunks             Chunk Names
                    ../fonts/icon_set_2.svg  20.9 kB          [emitted]
  ../fonts/glyphicons-halflings-regular.eot  20.1 kB          [emitted]
 ../fonts/glyphicons-halflings-regular.woff  23.4 kB          [emitted]
  ../fonts/glyphicons-halflings-regular.ttf  45.4 kB          [emitted]
  ../fonts/glyphicons-halflings-regular.svg   109 kB          [emitted]
                    ../fonts/icon_set_1.eot  71.6 kB          [emitted]
                   ../fonts/icon_set_1.woff  41.9 kB          [emitted]
                    ../fonts/icon_set_1.ttf  71.5 kB          [emitted]
                    ../fonts/icon_set_1.svg  98.5 kB          [emitted]
                    ../fonts/icon_set_2.eot  13.9 kB          [emitted]
                   ../fonts/icon_set_2.woff  7.85 kB          [emitted]
                    ../fonts/icon_set_2.ttf  13.7 kB          [emitted]
../fonts/glyphicons-halflings-regular.woff2    18 kB          [emitted]
                      ../fonts/fontello.eot   533 kB          [emitted]
                     ../fonts/fontello.woff   321 kB          [emitted]
                      ../fonts/fontello.ttf   532 kB          [emitted]
                      ../fonts/fontello.svg   826 kB          [emitted]
                      ../fonts/Glyphter.eot  7.22 kB          [emitted]
                     ../fonts/Glyphter.woff  5.02 kB          [emitted]
                      ../fonts/Glyphter.ttf  7.06 kB          [emitted]
                      ../fonts/Glyphter.svg  45.2 kB          [emitted]
                             main.bundle.js   1.2 MB       0  [emitted]  main
                           vendor.bundle.js  3.74 MB       1  [emitted]  vendor
                         main.bundle.js.map  1.72 MB       0  [emitted]  main
                       vendor.bundle.js.map  5.58 MB       1  [emitted]  vendor

这是来自浏览器正在接收的引导文件:

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url(/../fonts/glyphicons-halflings-regular.eot);
  src: url(/../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(/../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(/../fonts/glyphicons-halflings-regular.woff) format('woff'), url(/../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(/../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
}

这是公共(public)目录的目录结构

+ public
    + build
        main.bundle.js
        vendor.bundle.js
    + fonts
        glyphicons-halflings-regular.eot
        rest of font files...

但是当我尝试使用字体(字形)时，它们无法正确呈现。

Answer 1

我不知道为什么，但你不能使用字体的相对路径。我遇到了完全相同的问题，我的解决方法是将字体放在“build”目录下的文件夹中。所以你的目录结构将如下所示:

+ public
    + build
        main.bundle.js
        vendor.bundle.js
        + fonts
            glyphicons-halflings-regular.eot
            rest of font files...

这是我的加载程序的样子:

{
    test: /\.woff(2)?(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/,
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]'
},
{
    test: /\.(ttf|eot|svg)(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/,
    loader: 'file-loader?name=fonts/[name].[ext]'
},
{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},

另请注意，从 Webpack 2.0 开始，您应该对所有加载器使用 *-loader 版本，如我的示例所示。

希望有帮助。