Пользовательский конфиг Angular Webpack, не все опции работают правильно - PullRequest
Новая
       70

Пользовательский конфиг Angular Webpack, не все опции работают правильно

1 голос
/ 26 марта 2019

Я пытаюсь использовать @ angular-builders / custom-builders для настройки сборки веб-шрифтов во время обычного процесса сборки.Я использую пакет webfonts-loader .У меня это несколько работает, но не работают какие-либо параметры загрузчика, связанные с путями к файлам.Я думаю, что это связано с конфигурацией Angular, а не с пакетом загрузчика, но я не уверен, как правильно его настроить.

Код приведен ниже, но есть две основные проблемы.Во-первых, файл CSS выводится как main.css независимо от того, что я пытаюсь, а во-вторых, файл CSS ссылается на местоположение шрифта как /fontname.hash.ext (с заполнением правильной информации).Начало / приводит к тому, что файлы не будут найдены.

Как настроить конфигурацию так, чтобы дополнительные параметры пути работали правильно?

Я добавил соответствующий бит в angular.jsonпользовательская конфигурация Webpack вызывается: 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.font\.js/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'webfonts-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
};

Файл my-icon.font.js находится ниже.Некоторые из этих параметров соблюдаются, но все, что связано с путями, игнорируется. 

module.exports = {
  'files': [
    './font-svg/*.svg' // works
  ],
  'fontName': 'my-icons', // works
  'classPrefix': 'my-icon-', // works
  'baseSelector': '.my-icons', // works
  'types': ['woff2', 'woff', 'eot'], // works
  'order': ['woff2', 'woff', 'eot'], // works
  'fileName': '[fontname].[hash].[ext]', // works
  'cssFontsUrl': 'testUrl', // ignored
  'dest': 'testDest', // ignored
  'cssDest': 'testCssDest' // ignored
};

Я ссылаюсь на этот файл .font.js внутри main.ts, например: 

import './my-icons.font';
...