0

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:

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]']
        }
        ]
    }
};

過去にRailsを使用していたとき、クライアントが補間方法を知っているハッシュを生成するプリコンパイルされたアセットを使用したことを覚えています。反応+ webpackの場合はどうなりますか?

4

1 に答える 1