title: Images are not loading in browser with react, webpack and express
body: <p>I am working on a site build in react. It was working fine until I have implemented express. After implementation of express, I am not able to load some resources, especially images in the browser. The image path is coming correct but images are not showing in the browser.</p>
  
  <p><code>webpack.config.js</code> is:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  module.exports = {
    devtool: 'eval-source-map',
    entry: [
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname, 'app/index.js')
    ],
    output: {
      path: path.join(__dirname, '/dist/'),
      filename: '[name].js',
      publicPath: '/'
    },
    plugins: [
      new ExtractTextPlugin('/bundle.css', { allChunks: true }),
      new HtmlWebpackPlugin({
        template: 'app/index.html',
        inject: 'body',
        filename: 'index.html'
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
      })
    ],
    resolve: {
      extensions: ['', '.scss', '.css', '.js', '.json'],
      modulesDirectories: [
        'node_modules',
        path.resolve(__dirname, './node_modules')
      ]
    },
    module: {
      loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          "presets": ["react", "es2015", "stage-0", "react-hmre"]
        }
      }, {
        test: /\.json?$/,
        loader: 'json'
      }, {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract('style', 'css?sourceMap&amp;modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
      }, {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
      },{
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
          loader: "url-loader?limit=10000"
      },{
          test: /\.less$/, loader: "style-loader!css-loader!less-loader"
      },{
          test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
          loader: "file-loader"
      }]
    }
  };
  </code></pre>
  
  <p><code>server.js</code> file content is as follows:</p>
  
  <pre><code>const path = require("path");  
  const express = require("express");  
  const webpack = require("webpack");  
  const webpackDevMiddleware = require("webpack-dev-middleware");  
  const webpackHotMiddleware = require("webpack-hot-middleware");  
  const config = require("./webpack.config.js");
  
  const app           = express(),  
        DIST_DIR      = path.join(__dirname, "dist"),
        HTML_FILE     = path.join(DIST_DIR, "index.html"),
        isDevelopment = process.env.NODE_ENV !== "production",
        DEFAULT_PORT  = 3000,
        compiler      = webpack(config);
  
  app.set("port", process.env.PORT || DEFAULT_PORT);
  
  if (isDevelopment) {  
      app.use(webpackDevMiddleware(compiler, {
          publicPath: config.output.publicPath
      }));
  
      app.use(webpackHotMiddleware(compiler));
  
      app.get("*", (req, res, next) =&gt; {
          compiler.outputFileSystem.readFile(HTML_FILE, (err, result) =&gt; {
              if (err) {
                  return next(err);
              }
              res.set('content-type', 'text/html');
              res.send(result);
              res.end();
          });
      });
  }
  
  else {  
      app.use(express.static(DIST_DIR));
  
      app.get("*", (req, res) =&gt; res.sendFile(HTML_FILE));
  }
  
  app.listen(app.get("port"));
  </code></pre>
  
  <p><code>package.json</code> is as follows:</p>
  
  <pre><code>"main": "server.js",
    "script": {
      "start": "babel-node server-es6.js",
      "build:server": "babel server-es6.js --out-file server.js",
      "build:client": "webpack -p --config webpack.config.js --progress"
    },
  </code></pre>
  
  <p>Site is loading but some css are not loading. Console throw error:</p>
  
  <blockquote>
    <p><strong>GET <a href="http://bundle.css/" rel="nofollow noreferrer">http://bundle.css/</a> net::ERR_NAME_NOT_RESOLVED</strong></p>
  </blockquote>
  
  <p>Image path comes correctly as <code>http://localhost:3000/img/img1.png</code> but it's not showing in the browser. I think the issue is with webpack public path.</p>
  
  <p>When I am using <code>&lt;img src={require('/images/image-name.png')} /&gt;</code>, its working fine. But I don't want to do that because it's very heavy codebase and also I think it's not a nice solution.</p>
  
  <p>I have taken help from <a href="https://github.com/christianalfoni/webpack-express-boilerplate" rel="nofollow noreferrer">webpack-express-boilerplate</a>.</p>
  
  <p><strong>In chrome Network tool, image type is coming as <code>text/html</code>.</strong></p>