font-awesome-webpack

0.0.5-beta.2 verified Sat Apr 25 auth: no javascript abandoned

A Webpack loader package that integrates Font Awesome (Less-based) into webpack builds. Version 0.0.5-beta.2 is the latest, with infrequent releases. It simplifies loading Font Awesome fonts and styles by providing a preconfigured webpack loader and customizable Less configuration. Key differentiators vs raw font-awesome: automatic font loader regex, optional extract-text-webpack-plugin support, and selective style inclusion. Suitable for Webpack 1.x and 2.x projects, but unmaintained after 2017.

Common errors

error Module parse failed: C:/path/to/font-awesome/less/font-awesome.less Unexpected character '@' ↓

cause Missing less-loader in webpack config.

fix

Add { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' } to loaders.

error Error: Cannot find module 'font-awesome-webpack' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install font-awesome-webpack font-awesome' and ensure both are in dependencies.

error Module build failed: Error: Couldn't find preset "es2015" relative to directory ↓

cause Webpack 2 requires explicit loader configuration; older presets may be missing.

fix

Update webpack config to use rules and specify loaders correctly, or downgrade to Webpack 1.

error Uncaught Error: Module name "font-awesome-webpack" has not been loaded yet for context ↓

cause Using require('font-awesome-webpack') in a non-webpack environment or before webpack bootstrap.

fix

Ensure the require is inside a webpack-bundled file; not in a Node.js script.

Warnings

deprecated Package is unmaintained since 2017, last release 0.0.5-beta.2. ↓

fix Use Font Awesome official webpack setup or font-awesome-sass-loader.

gotcha Loader syntax changes between Webpack 1 and 2. Version 0.0.5-beta.1 supports Webpack 2. ↓

fix Use loaders array for Webpack 1, rules for Webpack 2. Check webpack version.

gotcha require('font-awesome-webpack') must be in application code, not webpack.config.js. ↓

fix Add the import line to your entry file or a module loaded from it.

gotcha Custom config files must be named font-awesome.config.js and font-awesome.config.less and placed next to each other. ↓

fix Ensure both files exist in same directory as specified in the loader query.

deprecated extract-text-webpack-plugin extraction syntax changed. Old .extract('style-loader', 'css-loader') may fail. ↓

fix Use .extract({ use: ['css-loader', 'less-loader'], fallback: 'style-loader' }) for newer versions.

Install

npm install font-awesome-webpack

yarn add font-awesome-webpack

pnpm add font-awesome-webpack

Imports

default import (complete)
wrong
```
const fa = require('font-awesome-webpack');
```
correct
```
import 'font-awesome-webpack';
```
ESM import loads all styles; CommonJS require also works but typically used for side effects only.
custom config import
wrong
```
require('font-awesome-webpack!./font-awesome.config.js');
```
correct
```
import 'font-awesome-webpack!./font-awesome.config.js';
```
Use inline loader syntax with webpack. Config file must be .js; optional .less file alongside.
require in entry
```
require('font-awesome-webpack!./path/to/font-awesome.config.js');
```
CommonJS require is typical in webpack entry config; works in both ESM and CJS.

Quickstart

Sets up webpack loaders, imports all Font Awesome styles, and shows optional custom configuration with selective styles.

// webpack.config.js (Webpack 1.x syntax)
module.exports = {
  module: {
    loaders: [
      { test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  },
  entry: [
    "font-awesome-webpack",
    "./app.js"
  ]
};

// app.js
require('font-awesome-webpack');

// font-awesome.config.js (optional)
module.exports = {
  styles: {
    mixins: true,
    core: true,
    icons: true,
    larger: true,
    path: true
  }
};