Question

我试图在webpack中加入font-awesome。以下

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配置如下：

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

Answer 1

所以font-awesome没有Javascript组件。因此，当您将其包含在入口点定义中时，如下所示：

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

没有找到的包裹。尝试调整供应商定义，例如

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

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

错误包括使用webpack的字体很棒

1 个答案: