在Webpack中配置字体 [英] Configure fonts in webpack

问题描述

我在这里的webpack有点问题；我有点无法加载字体. 这是我的webpack.config.js

I have a slight problem with webpack here; I'm somewhat unable to load fonts. This is my webpack.config.js

const nodeExternals = require('webpack-node-externals');
const path = require('path');
const devMode = true;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry:
        [
            './src/main.js',
            './scss/main.scss'
        ],

    output: {
        filename: "main.min.js",
        chunkFilename: '[name].bundle.min.js?bust=[chunkhash]',
        path: path.resolve(__dirname, 'static_root'),
        publicPath: "/assets/"
    },
    target: "node",
    externals: [nodeExternals()],
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false, // Enable to remove warnings about conflicting order
        }),
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: 'css/'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                            hmr: process.env.NODE_ENV == 'development',
                        }
                    },
                ],
            },
            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: '[name].[ext]'
                }
            }
        ]
    }
};

这将构建我的css，尽管随后不包含/未渲染我的本地字体.这还将我的字体复制到/static_root(css的构建位置).

This builds my css although then my local fonts aren't included / aren't rendered.. This also copies my Font to /static_root (which is where the css gets built to).

所以我最终得到了这个目录结构:

so I end up with this directory structure:

public/static_root/css/main.css
public/static_root/BebasNeue-Regular.ttf
public/static_root/main.min.js

不幸的是，我想到只是调整scss文件中字体的路径，尽管这会使构建过程失败，因为我的工作目录和输出根目录不相同.

I thought about just adjusting the path to the font in my scss file unfortunately though this lets the build process fail, since my working dir and the output root aren't the same.

我的scss/font目录的结构如下:

My scss/font-directory is structured like so:

/public/scss/fonts/_fonts.scss
/public/scss/fonts/BebasNeueRegular.ttf
/public/scss/main.scss

所以我怎么能实现字体的包含，或者通常是怎么做的，因为我在网上发现了许多不同的方法，可惜对我来说没有用.

So how can I achieve the inclusion of the font or how is this usually done since I found lots of different approaches online, that sadly didn't work out for me.

任何帮助将不胜感激.

问候， derelektrischemoench

Greetings, derelektrischemoench

推荐答案

所以我找出了引起问题的原因.它必须使用加载程序来处理字体(我使用的是较旧的字体).我像这样用url-loader尝试了整个过程:

So I found out what was causing the problems. It had to do something with the loader for the fonts (I was using an older one). I tried the whole thing with the url-loader like so:

{
  test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
  loader: 'url-loader',
  options: {
      limit: 10000,
      name: '[name].[ext]'
      }
  }

...成功了.这有点令人困惑，因为我在网络上找到了无数关于如何实现此目标的教程，其中大部分已被弃用.

... which got it going. It was just kinda confusing, since I found a bazillion of tutorials on the web on how to achieve this, of which the most part was deprecated.

感谢您的答复.

这篇关于在Webpack中配置字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！