0

我正在使用 create-react-app 来自学 React。但是，我遇到了一个对我没有任何意义的错误。

错误是：

Error: Child compilation failed: Module not found: Error: Cannot resolve 'file' or 'directory' ./src/name-icon. png in C:\Users\Jacob\college-canoe: Error: Cannot resolve 'file' or 'directory' ./src/name-icon.png in C:\Users\Ja cob\college-canoe

我看到了 WebPack“认为”的问题是什么，但我的代码实际上并没有在任何地方调用 name-icon。它曾经是，但我将名称更改为nameIcon。实际使用该图像的唯一代码片段是：

import React, { Component } from 'react';

import nameIcon from './photos/nameIcon.png';

export default class NavBar extends Component {
  render() {
    return (
  <div className="navbar-container">
    <ul className="navbar-top-right">
      <img className="icon" src={nameIcon} />
      <li><a className="navbar" href="#">Search</a></li>
      <li><a className="navbar" href="#contact">Contact</a></li>
      <li><a className="navbar" href="#">Compare</a></li>
      <li><a className="navbar" href="#">Home</a></li>
    </ul>
  </div>
    )
  }
}

当我使用 nameIcon 注释掉代码时，问题甚至仍然存在。我在这里完全迷失了，任何帮助都会很棒。

编辑：添加到 webpack.config.js

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('../index.js'); // use inside the npm package

// We use the NODE_ENV in our automation commands to differentiate environments
var production =
  process.env.NODE_ENV === 'production' ||
  process.env.NODE_ENV === 'preprod';

// Setup our plugins.
var plugins = [
  // attaches the webpack-generated JS to our main HTML file
  new HtmlWebpackPlugin({template: './src/index.html'}),
  // create global access to the NODE_ENV within our Webpacked code:
  new webpack.DefinePlugin({
    __ENV__: JSON.stringify(process.env.NODE_ENV)
  }),
  // http://gaearon.github.io/react-hot-loader/getstarted/
  new webpack.HotModuleReplacementPlugin(),
  // Mac doesn't care about case, but linux servers do, so enforce...
  new CaseSensitivePathsPlugin()
];

// In production we do a bit more...
if (production) {
  plugins.concat(
    [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]);
}

const devEntry = [
    'webpack-dev-server/client?http://0.0.0.0:3000', // tells client where to get hot reloads
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
  ];
const prodEntry = [
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
];

const theEntry = (production) ? prodEntry : devEntry;

module.exports = {

  // Bundle to our dist folder as a main.js file.
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '/'
  },

  devtool: 'sourcemap',

  // Our master entry point.
  entry: theEntry,

  // Extra helpers to make require or include easier.
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },

  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      // in dev only, hotload
      loader: production ? 'babel' : 'react-hot!babel',
      // other babel options are specified in .babelrc
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json'
    }]
  },

  plugins: plugins
};

编辑 2：添加了项目结构。

项目结构

编辑 3：仍然不知道问题是什么，但是将 nameIcon 重命名为 name-icon 并将其放回 /src/ 并在我的 /photos/ 文件夹中有第二个副本以某种方式修复了它。稍后我将不得不回到这个问题。

4

1 回答 1

0

你必须安装文件加载器

npm install --save-dev file-loader

然后是模块设置-

 module: {
    loaders: [{
        test: /\.(js|jsx)$/,
        // in dev only, hotload
        loader: production ? 'babel' : 'react-hot!babel',
        // other babel options are specified in .babelrc
        exclude: /node_modules/
      }, {
        test: /\.json$/,
        loader: 'json'
      },
      {test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'}
    ]
  },
于 2016-09-24T04:50:49.363 回答