Webpack 4：css-loader + file-loader 在构建过程中添加字体及其样式表答案

【问题标题】：Webpack 4: css-loader + file-loader to add fonts and their stylesheets in the build processWebpack 4：css-loader + file-loader 在构建过程中添加字体及其样式表
【发布时间】：2018-08-21 08:42:16
【问题描述】：

鉴于此设置：

fonts/styles.css

@font-face {
  family: 'MyFont';
  src: url('fonts/myfont.otf');
}

我该怎么做：

在我的 JS 包中，以字符串形式获取对 CSS 文件 URL 的引用，例如[name].[hash].css
生成的 CSS 文件应该是纯 CSS 文件，但 url()s 指向生成的 webfont 文件？

类似：

@font-face {
  family: 'MyFont';
  src: url('myfont.dds9394u329d9sa9r8439.otf');
}

我正在尝试：

webpack.config.js

{
  test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
  loader: 'file-loader',
  include: [/fonts/]
},

{
  test: /\.css$/,
  use: ['file-loader', 'css-loader'],
  include: [/fonts/]
}

JS 文件

const myfont = {
  family: 'MyFont',
  stylesheet: require('fonts/styles.css')
}

根据a previous question，使用file-loader 和require() 可以很好地获取CSS 的URL，但生成的文件不是纯CSS。

如何结合file-loader 和css-loader（可能还有其他加载器）来获取这个CSS 文件？

谢谢！

附：我想避免 copy-webpack-plugin 这样做，因为我希望 CSS / 字体文件在代码中被散列和可寻址。

【问题讨论】：

标签： webpack css-loader webpack-file-loader

【解决方案1】：

为了后代：这是我能够获得我正在寻找的结果的 Webpack 配置。

module: {
  rules: {
    // Font stylesheets
    {
      test: /\.css$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'css/[hash].[ext]'
          }
        },
        'extract-loader',
        'css-loader',
        'postcss-loader'
      ],
      include: [/fonts/]
    },

    // Font files
    {
      test: /\.(woff|woff2|ttf|otf)$/,
      loader: 'file-loader',
      include: [/fonts/],

      options: {
        name: '[hash].[ext]',
        outputPath: 'css/',
        publicPath: url => '../css/' + url
      }
    },
  }
}

【讨论】：

感谢您将它留给后代，它帮助了我:)

【解决方案2】：

我知道这个问题被问到已经有一段时间了，但和 Dan 一样，我把这个留给后人。

所以这是适用于我的设置：

const path = require("path");

module.exports = (env, argv) => ({
  ...
  module: {
       rules: [
       {
         test: /\.css$/,
         use: ["style-loader", {loader: "css-loader", options: {modules: true}}],
         exclude: /node_modules/,
      },        
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader', 
            options: {
              outputPath: (url, resourcePath, context) => {
                if(argv.mode === 'development') {
                  const relativePath = path.relative(context, resourcePath);
                  return `/${relativePath}`;
                }
                return `/assets/fonts/${path.basename(resourcePath)}`;
              }
            }
          }
        ]
      }]
    }
});

可在此处找到完整的工作设置： https://github.com/przemek-nowicki/multi-page-app-with-react/blob/master/webpack.config.js

【讨论】：