Question

我正在尝试创建第一个npm库，以帮助检测文件名图标。它基于existing library，但我正在尝试使其与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的字体真棒，IE不支持Woff文件，而IE不支持EOT，其他人也不支持EOT。 Safari，Android，iOS和旧版iOS相同，但其他平台不支持truetype TTF。因此，如果要使用一致的字体，请尝试在npm或您使用的任何包模块中添加真棒字体包，这将生成所有格式的所有必需文件。

我的应用程序通过SASS与npm交互，因此我添加了font-awesome-sass包，您可以为所有css文件添加简单的font-awesome包：

npm install --save font-awesome-sass

＆以类似

的方式导入

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

任何后期编译都是使用可添加相同哈希值的同一Webpack进行的，因此我从未引用过代码文件中的硬编码哈希，实际上，在CI中，每个构建都生成新的哈希值。

Webpack无法正确引用woff2文件

1 个答案: