4

我正在尝试将 React 应用程序部署到 Heroku。在我的应用程序中，我使用 Flag Spirtes ( https://www.flag-sprites.com/ )，因此我的目录中有一个文件夹和一个标志的图像。

我已经将 webpack 配置为使用文件加载器加载它，并且当我在本地以生产模式运行服务器时似乎工作正常。但是，当我尝试部署到 Heroku 时，出现以下错误：

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/flags/flags.css
remote:        Module not found: Error: Can't resolve 'file-loader' in '/tmp/build_0792dbd9d1cc095cd6dcf8783b3ad91a'
remote:        @ ./~/css-loader!./~/sass-loader/lib/loader.js!./src/flags/flags.css 6:180-202
remote:        @ ./src/flags/flags.css
remote:        @ ./src/index.js
remote:        @ multi ./src/index.js

下面是我的文件夹目录的图片：

在此处输入图像描述

还有我的 webpack.config.js：

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.js'
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: [/\.css$/, /\.scss$/],
        exclude: /node_modules/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

添加图像非常新，所以可以用一些新手解释来做:)

4

0 回答 0