Respond to server rendering vs webpack

Question

I am new to server-side rendering and can make simple isomorphic React applications with webpack for the client side and Express for the server side (via React of course). But now I have some problems - I decided to use images in my project:

export default class JustImage extends Component {
  render() {
    return (
      <div>
        <img src={require("just_image.png")} />
      </div>
    );
  }
}

This code works like a charm for the client, but my server side code, when I try to do, will tell me this error:

just_image.png: Unexpected character ' '

As I understand it, Node.js does not know anything about webpack loaders, so it cannot load the image correctly. Since I'm new to React and server side, I want to know if there are any standard ways to fix this problem - not just images, I use images (PNG / JPEG / JPG / ICO), SVG, SASS / LESS / CSS. Thanks in advance.

Answer 1

: AFAIK:

• webpack . webpack , . , url-loader file-loader .

  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loader: 'url-loader',
    options: {
      limit: 8192,
    },
  }
  

• require.extensions .

  if (process.env === 'development') {
    require.extensions['.png'] = () => {}
  }
  

, :)

Answer 2

, react-starter-kit, , , webpack, webpack.