Jenkinsを使用したReactアプリケーションの問題ファイルローダーのためにファイルが欠落しています

Question

私はJenkinsを使用して反応アプリケーションを構築していますが、ビルドは成功します。しかし、一部のコンポーネントが読み込まれず、エラーが発生する：

Uncaught Error: Cannot find module './sun.png' 

ローカル、すべて正常に動作します。

アプリ構造（サーバー）：

/public/images/<images_are_here> 

アイコンコンポーネント：

import React from 'react'; 

const Icon = ({icon, size}) => { 

    const iconStyle = { 
     "height" : size + 'px', 
     "width" : size + 'px', 
     "pointerEvents": "none" 
    }; 

    return (
    <img src={require('../../../public/images/' + icon)} style={iconStyle} alt=""/> 
); 
}; 

export default Icon; 

Webpack.config.js：

過去にRailsのを使用して

module.exports = { 
entry: ['babel-polyfill', __dirname + '/src/index.js'], 
output: { 
    path: __dirname + '/public/js', 
    filename: 'bundle.js', 
    publicPath: "/public/images/" 
}, 
module: { 
    rules: [ 
     { 
      test: /\.jsx?$/, 
      exclude: '/node_modules/', 
      loader: 'babel-loader', 
      query: { 
       presets: [ 
        'es2015', 
        'stage-0', 
        'react' 
       ] 
      } 
     }, 
     { 
      test: /\.scss$/, 
      use: ["style-loader", "css-loader", "sass-loader"] 
     }, 
     { 
      test: /\.(jpg|png|svg)$/, 
      use: ['file-loader?name=[name].[ext]'] 
     } 
     ] 
    } 
}; 

、私が覚えています使用される資産は事前にコンパイルされ、クライアントが補間方法を知っていたハッシュを生成します。 react + webpackの場合はどうなりますか？

Answer 1

ファイルローダーをurl-loaderに置き換えると、問題が解決しました。私はそれが奇妙な行動（IMO）であるため、実際の理由を見つけたら掘り下げて更新します。