Webpack неправильно ссылается на файлы woff2

Question

Я пытаюсь создать свою первую библиотеку npm, которая помогает определять значки для имен файлов.Она основана на существующей библиотеке , но я пытаюсь сделать ее совместимой с веб-пакетом, чтобы использовать ее в проектах VueJS.

Иерархия :

.
├── css
│   └── style.css
├── fonts
│   ├── devopicons.woff2
│   ├── file-icons.woff2
│   ├── fontawesome.woff2
│   ├── mfixx.woff2
│   └── octicons.woff2
├── index.js
├── package.json
└── webpack.config.js

Файл CSS ссылается на внешние woff2 файлы, найденные в пакете.

style.css :

...
@font-face {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/fontawesome.woff2");
}
...

Я импортируювышеупомянутый файл CSS в мой index.js, чтобы веб-пакет выбрал его как зависимость.

index.js :

import './css/styles.css'
...
class FileIcons {
  ...
}
export default new FileIcons()

веб-пакет.config.js :

var path = require('path')

module.exports = {
  entry: './index.js',
  mode: 'production',
  output: {
    library: 'FileIcons',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist'),
    filename: path.join('css', 'bundle.js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader' // translates CSS into CommonJS
          }
        ]
      },
      {
        // Match woff2 in addition to patterns like .woff?v=1.1.1.
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: 'url-loader',
          options: {
            // Limit at 20k. Above that it emits separate files
            limit: 20000,

            // url-loader sets mimetype if it's passed.
            // Without this it derives it from the file extension
            mimetype: 'application/font-woff',

            // Output below fonts directory
            name: 'fonts/[name].[ext]'
          }
        }
      }
    ]
  }
}

package.json :

{
  ...
  "main": "./dist/css/bundle.js",
  "files": [
    "dist/*",
    "css/*",
    "fonts/*",
    ".babelrc",
    ".eslintrc.js",
    "*.js",
    "LICENSE.md",
    "README.md",
    "*.json"
  ],
  ...
}

В моем другом проекте (компонент Vue) я импортирую эту библиотекуследующим образом:

<template>
...
</template>
<script>
  import FileIcons from '@gurupras/file-icons-js'
  ...
</script>

Импорт файла этим способом приводит к 404 ошибкам, утверждающим, что http://localhost:8080/fonts/octicons.<hash>.woff2 не удалось загрузить.

Что я делаю неправильно?Как правильно настроить веб-пакет для обработки этого проекта как библиотеки и правильной ссылки на файлы woff2?

Answer 1

Попробуйте изменить в загрузчике name property с fonts/[name].[ext] на fonts/[name]_[hash].[ext], например:

{
    // Match woff2 in addition to patterns like .woff?v=1.1.1.
    test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
    use: {
      loader: 'url-loader',
      options: {
        // Limit at 20k. Above that it emits separate files
        limit: 20000,

        // url-loader sets mimetype if it's passed.
        // Without this it derives it from the file extension
        mimetype: 'application/font-woff',

        // Output below fonts directory
        name: 'fonts/[name]_[hash].[ext]'
    }
}

UPDATE Я просто замечаю, что вы используете woff или woff2 для шрифта awesome, файлы Woff не поддерживаются IE, а EOT, который поддерживается IE, не поддерживается другими. То же самое относится и к Safari, Android, iOS и более ранней версии. IOS поддерживает истинный тип TTF, а не другие. Поэтому, если вам нужен согласованный шрифт, попробуйте добавить пакет font-awesome в npm или любой используемый вами пакетный модуль, который сгенерирует все необходимые файлы во всех форматах.

Мое приложение реагирует на npm с помощью SASS, поэтому я добавил пакет font-awesome-sass, вы можете добавить простой пакет font-awesome со всеми файлами css:

npm install --save font-awesome-sass

и импортируется в реакции как

@import "../node_modules/font-awesome-sass/assets/stylesheets/font-awesome";

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