Webpack not referencing woff2 files correctly

I'm trying to create my first npm library that helps detect icons for filenames. It's based off of an existing library, but I'm trying to make it webpack compatible so that I can use it in VueJS projects.

Hierarchy:

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


The CSS file references external woff2 files that are found in the package.

woff2

style.css:

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

...


I import the above CSS file into my index.js to ensure that webpack picks it up as a dependency.

index.js

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

]
,
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"
],
...



In my other project (Vue component), I'm importing this library as follows:

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


Importing the file this way leads to 404 errors stating that http://localhost:8080/fonts/octicons.<hash>.woff2 failed to be loaded.

404

http://localhost:8080/fonts/octicons.<hash>.woff2

What am I doing wrong? How do I properly set up webpack to treat this project as a library and reference the woff2 files correctly?

1 Answer
1

Try change in loader name property from fonts/[name].[ext] to fonts/[name]_[hash].[ext] like :

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
I just notices you are using woff or woff2 for font awesome, Woff files are not supported by IE & EOT which is supported by IE is not supported by others. Same is for Safari, Android, iOS & legacy iOS supports truetype TTF not others So if want consistent font, try adding font-awesome package in npm or any package module you use, that will generate all required files in all format .

My application is in react with npm with SASS so I added font-awesome-sass package, you can add simple font-awesome package with all css files:

npm install --save font-awesome-sass


& imported in react like

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


any post compiling is done with same webpack that can add same hashes so I never referenced hash hard coded in code files, in fact in CI every build generates new hash.

dist/fonts

http://localhost:9080/fonts/octicons.de59a972.woff2

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.