title: Webpack, Dev-Middleware, and Static Files
body: <p>I've got a Webpack/React/Redux project served with Express and I'm having some trouble understanding how they fit together. My Express app runs Webpack and serves my root index.html file like so: </p>
  
  <pre><code>const app = express();
  const server = require("http").createServer(app);
  
  app.use(bodyParser.json());
  app.use("/some/path", express.static(path.join(__dirname, "/public")));
  
  // webpack middleware
  const compiler = webpack(webpackConfig);
  
  const webpackDevMid = require("webpack-dev-middleware");
  const webpackHotMid = require("webpack-hot-middleware");
  
  app.use(webpackDevMid(compiler, {
      noInfo: true,
      publicPath: webpackConfig.output.publicPath  // '/static/'
  }));
  
  app.use(webpackHotMid(compiler));
  
  app.get("/", (req, res) =&gt; {
      if (!req.cookies.access_token) return res.redirect("/login");
      return res.sendFile(path.join(__dirname, "index.html"));
  });
  </code></pre>
  
  <p>My root index file then has the "root" tag in the body and the Webpack "/static/bundle.js" in a script tag. The root tag points to my index.js file bundled in bundle.js and everything renders correctly. This all works fine.</p>
  
  <p>My issue is that I'm trying to include my favicon.ico in my root index.html, which is not bundled up with Webpack, so I want to serve it as a static file with Express, which I usually do with the code:</p>
  
  <pre><code>app.use("/some/path", express.static(path.join(__dirname, "/public")));
  </code></pre>
  
  <p>Unfortunately, this folder is not getting served to the client, and I cannot access my favicon outside of the Webpack bundle (which my index.html has no discretionary access to). In fact, nothing I try to expose to the client in this way is working. Is there something I'm not understanding about webpack-dev-middleware, or the way an Express server works with Webpack? What gives?</p>