CODEWITHSUNDEEP
webpackfont-awesome
Jiew Meng
Jiew Meng

Reputation: 88197

Error including font-awesome with webpack

I am trying to include font-awesome with webpack. The below 

import 'font-awesome/css/font-awesome.css';

or 

require('font-awesome/css/font-awesome.css')

produces the following error

ERROR in multi vendor
Module not found: Error: Can't resolve 'font-awesome' in '...'
 @ multi vendor

Whats wrong? font-awesome is already installed

I am using fountain.io, the full webpack config looks like: 

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('../package.json');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      }
    ],

    loaders: [
      {
        test: /.json$/,
        loaders: [
          'json'
        ]
      },
      {
        test: /\.(css|less)$/,
        loaders: ExtractTextPlugin.extract({
          fallbackLoader: 'style',
          loader: 'css?minimize!less!postcss'
        })
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate'
        ]
      },
      {
        test: /.html$/,
        loaders: [
          'html'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'})
  ],
  postcss: () => [autoprefixer],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  entry: {
    app: `./${conf.path.src('index')}`,
    vendor: Object.keys(pkg.dependencies)
  }
};

Upvotes: 1

Views: 2195

Answers (1)

Alan Ray
Alan Ray

Reputation: 81

So font-awesome doesn't have a Javascript component. As a result, when you include it in your entry point definition like this:

entry: { app: `./${conf.path.src('index')}`, vendor: Object.keys(pkg.dependencies) }

there's no package to find. Try adjusting your vendor definition, e.g.

vendor: Object.keys(pkg.dependencies).filter(name => (name != 'font-awesome'))

The import/require statement in main.js should be enough to cause the loaders to include the necessary files.

Upvotes: 8

Related Questions