html - 无法从 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.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 可能不仅存在路径问题，而且还可能错过指定不同加载程序的层次结构。很可能永远不会达到您的内联加载程序案例陈述。

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