Webpack没有正确引用woff2文件

Question

我正在尝试创建我的第一个npm库来帮助检测文件名的图标。它是基于一个现有图书馆，但我试图使它与webpack兼容，以便我可以在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中，以确保webpack将其作为依赖项。

index.js：

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

webpack.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无法加载。

我做错了什么？如何正确设置webpack，将该项目作为一个库，并正确引用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]'
    }
}

更新-我只是注意到你在使用woff或woff2的字体很棒，Woff文件不支持IE & EOT，IE是不支持的，其他人不支持。对于Safari，Android和iOS也是如此，遗留的iOS不支持其他类型的TTF，所以如果想要一致的字体，可以尝试在npm或您使用的任何包模块中添加字体棒包，这将生成所有格式的所需文件。

我的应用程序是在npm与SASS的反应，所以我添加了字体-可怕-sass软件包，您可以添加简单的字体-可怕的软件包与所有的css文件：

npm install --save font-awesome-sass

&进口的反应就像

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

任何后期编译都是用相同的webpack完成的，它可以添加相同的散列，所以我从来没有引用过在代码文件中硬编码的散列，事实上，在CI中，每个构建都会生成新的哈希。