错误包括webpack的font-awesome [英] Error including font-awesome with webpack

问题描述

我正在尝试在webpack中加入真棒字体.以下

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

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

或

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

产生以下错误

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

怎么了? font-awesome已安装

我正在使用fountain.io，完整的Webpack配置如下:

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)
  }
};

推荐答案

因此，超棒的字体没有Javascript组件.结果，当您将其包含在入口点定义中时，如下所示:

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) }

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'))

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

main.js中的import/require语句应足以使加载程序包含必要的文件.

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

这篇关于错误包括webpack的font-awesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！