Невозможно встроить шрифты из модулей npm

Question

Я использую Angular 8 с компоновщиком Custom Webpack.

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

У меня есть ссылка на ngx-datatable, и я ссылаюсь на css следующим образом:

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

Этот файл CSS, на который ссылаются, имеет font-face, например, так:

@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;

Я хочу встроить файл шрифта таблицы данных в сборку моего веб-пакета.Насколько я понимаю, после установки base64-inline-loader у меня должна быть возможность настраивать конфигурацию веб-пакета, которая выглядит следующим образом:

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-загрузчика я все еще вижу, что файлы копируются и хэшируются вместо встроенных.

Редактировать

Я считаю, что моя проблемаОтносительно Angular 7, SVG и Sass, как установить относительный путь , но я все еще не уверен, как это исправить.

Answer 1

Может ли быть так, что вашему Webpack.config.js может потребоваться некоторая настройка?

Я предпочитаю держать командную строку в чистоте (здесь: webpack --config Webpack.config.js) и помещать все в файл конфигурации.Предполагая, что вы используете более новую версию Webpack, я предлагаю файл конфигурации, подобный этому:

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% случаев это проблема конфигурации веб-пакета.A --verbose, --progress или -d могут пригодиться, см. Документацию CLI Webpack .