无法从 npm 模块内联字体

Question

我正在使用自定义 Webpack 构建器运行 Angular 8。

"builder": "@angular-builders/custom-webpack:browser",

我引用了ngx-datatable，我引用了css，如下：

@import '~@swimlane/ngx-datatable/release/assets/icons.css';

引用的 css 文件具有如下字体：

@font-face {
  font-family: "data-table";
  src:url("fonts/data-table.eot");
  src:url("fonts/data-table.eot?#iefix") format("embedded-opentype"),
    url("fonts/data-table.woff") format("woff"),
    url("fonts/data-table.ttf") format("truetype"),
    url("fonts/data-table.svg#data-table") format("svg");
  font-weight: normal;
  font-style: normal;

我想要做的是将数据表字体文件内联到我的 webpack 构建中。我的理解是，在安装 base64-inline-loader 之后，我应该能够拥有一个如下所示的自定义 webpack 配置：

module.exports = {
  module: {
    rules: [
 {
   test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
   use: 'base64-inline-loader'
 }
    ]
  }
};

但是，在运行构建之后，没有任何内容被内联，我可以看到浏览器正在向

发出请求

http://localhost:4200/data-table.woff

我不清楚如何解决这个问题。我的理解是，对于 .png、.woff、.eot 等文件，默认的 Angular webpack 配置将使用文件加载器，它将在 dist 目录中输出文件的哈希版本。然而，即使在添加 base64-inline-loader 之后，我仍然看到文件被复制和散列，而不是内联。

编辑

我认为我的问题与Angular 7, svg and sass how to set relative path 有关，但我仍然不确定如何解决。

Answer 1

webpack 会将字体内联到您的输出 .js 文件（或 .woff 文件）中，但不会提供它。这意味着您必须在 angular.json 中的静态资产中手动添加此字体：

"assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/swimlane_or_whatever/assets/",
                "output": "my-assets"
              },

上面的代码意味着你运行开发服务器后，资源/my-assets/fonts.woff会被解析并传递给客户端。

Answer 2

您的Webpack.config.js 可能需要一些调整吗？

我更喜欢保持命令行干净（这里：webpack --config Webpack.config.js）并将所有内容放入配置文件中。假设你使用的是较新版本的 Webpack，我建议使用类似于 this 的配置文件

var path = require('path'); // this is essential for path.resolve()

module.exports = {
  mode: 'development',
  entry: './yourEntryPage.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // specifies the output
    filename: 'bundle.js'
  },
 devtool: "source-map", // for debugging webpack's output.
  module: {
    rules: [
        {   test: /\.jsx$|\.es6$|\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react'],
                }
            },
            exclude: /node_modules/
        },
        {   test: /\.(png|jpg|gif)$/,
            use: {  
                loader: 'file-loader',
                options: { 
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        },
        {   test: /\.(ttf|eot|woff(2)?)$/, // modified regex matching files with font extension
            use: 'base64-inline-loader'
        }           
    ]
  }
};

你不能直接使用这个配置文件，但我希望我的建议能让你了解 Webpack 的不那么最小的配置是什么样的。您建议的Webpack.config.js 可能不仅有路径问题，还可能错过指定不同加载器的层次结构。很可能您的 inline-loader case-statement 永远不会到达。

注意：我不知道@angular-builders/custom-webpack:browser，但如果该软件包不会过多地干扰Webpack.config.js，我希望它会有所帮助。我的经验告诉我，在 95% 的情况下，cuplrit 是 webpack 配置问题。 --verbose、--progress 或 -d 可能会派上用场，请参阅 Webpack's CLI documentation。