在 webpack 中配置字体答案

【问题标题】：Configure fonts in webpack在 webpack 中配置字体
【发布时间】：2019-12-05 21:43:42
【问题描述】：

我这里的 webpack 有点问题；我有点无法加载字体。这是我的 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 构建的位置）。

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

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

不幸的是，我考虑过在我的 scss 文件中调整字体的路径，但这会让构建过程失败，因为我的工作目录和输出根目录不一样。

我的 scss/font-directory 的结构如下：

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

那么我怎样才能实现字体的包含，或者这通常是如何完成的，因为我在网上找到了很多不同的方法，遗憾的是对我来说并不奏效。

任何帮助将不胜感激。

您好，脱发性

【问题讨论】：

标签： css webpack sass fonts

【解决方案1】：

嘿@derelektrischemoench，我觉得Webpack官网的例子很不错，你可以按照webpack的配置和文件结构：

https://webpack.js.org/guides/asset-management/#loading-fonts

【讨论】：

感谢您的评论。我已经让它工作了，我为字体使用了错误的加载器。切换到 url-loader 并在那里配置了一些小东西，它工作了。
很高兴知道:)

【解决方案2】：

所以我发现了导致问题的原因。它必须对字体的加载器做一些事情（我使用的是旧的）。我用 url-loader 尝试了整个过程：

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

... 它开始了。这有点令人困惑，因为我在网上找到了大量关于如何实现这一点的教程，其中大部分已被弃用。

感谢您的回复。

【讨论】：