{"id":20038,"library":"font-awesome-webpack","title":"font-awesome-webpack","description":"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.","status":"abandoned","version":"0.0.5-beta.2","language":"javascript","source_language":"en","source_url":"https://github.com/gowravshekar/font-awesome-webpack","tags":["javascript","font-awesome","webpack"],"install":[{"cmd":"npm install font-awesome-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add font-awesome-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add font-awesome-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, provides the Less source and font files","package":"font-awesome","optional":false}],"imports":[{"note":"ESM import loads all styles; CommonJS require also works but typically used for side effects only.","wrong":"const fa = require('font-awesome-webpack');","symbol":"default import (complete)","correct":"import 'font-awesome-webpack';"},{"note":"Use inline loader syntax with webpack. Config file must be .js; optional .less file alongside.","wrong":"require('font-awesome-webpack!./font-awesome.config.js');","symbol":"custom config import","correct":"import 'font-awesome-webpack!./font-awesome.config.js';"},{"note":"CommonJS require is typical in webpack entry config; works in both ESM and CJS.","wrong":"","symbol":"require in entry","correct":"require('font-awesome-webpack!./path/to/font-awesome.config.js');"}],"quickstart":{"code":"// webpack.config.js (Webpack 1.x syntax)\nmodule.exports = {\n  module: {\n    loaders: [\n      { test: /\\.woff2?(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader: \"url-loader?limit=10000&mimetype=application/font-woff\" },\n      { test: /\\.(ttf|eot|svg)(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, loader: \"file-loader\" }\n    ]\n  },\n  entry: [\n    \"font-awesome-webpack\",\n    \"./app.js\"\n  ]\n};\n\n// app.js\nrequire('font-awesome-webpack');\n\n// font-awesome.config.js (optional)\nmodule.exports = {\n  styles: {\n    mixins: true,\n    core: true,\n    icons: true,\n    larger: true,\n    path: true\n  }\n};","lang":"javascript","description":"Sets up webpack loaders, imports all Font Awesome styles, and shows optional custom configuration with selective styles."},"warnings":[{"fix":"Use Font Awesome official webpack setup or font-awesome-sass-loader.","message":"Package is unmaintained since 2017, last release 0.0.5-beta.2.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Use loaders array for Webpack 1, rules for Webpack 2. Check webpack version.","message":"Loader syntax changes between Webpack 1 and 2. Version 0.0.5-beta.1 supports Webpack 2.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Add the import line to your entry file or a module loaded from it.","message":"require('font-awesome-webpack') must be in application code, not webpack.config.js.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure both files exist in same directory as specified in the loader query.","message":"Custom config files must be named font-awesome.config.js and font-awesome.config.less and placed next to each other.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use .extract({ use: ['css-loader', 'less-loader'], fallback: 'style-loader' }) for newer versions.","message":"extract-text-webpack-plugin extraction syntax changed. Old .extract('style-loader', 'css-loader') may fail.","severity":"deprecated","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add { test: /\\.less$/, loader: 'style-loader!css-loader!less-loader' } to loaders.","cause":"Missing less-loader in webpack config.","error":"Module parse failed: C:/path/to/font-awesome/less/font-awesome.less Unexpected character '@'"},{"fix":"Run 'npm install font-awesome-webpack font-awesome' and ensure both are in dependencies.","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'font-awesome-webpack'"},{"fix":"Update webpack config to use rules and specify loaders correctly, or downgrade to Webpack 1.","cause":"Webpack 2 requires explicit loader configuration; older presets may be missing.","error":"Module build failed: Error: Couldn't find preset \"es2015\" relative to directory"},{"fix":"Ensure the require is inside a webpack-bundled file; not in a Node.js script.","cause":"Using require('font-awesome-webpack') in a non-webpack environment or before webpack bootstrap.","error":"Uncaught Error: Module name \"font-awesome-webpack\" has not been loaded yet for context"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}