I have a Webpack / React / Redux project with Express, and I'm having trouble understanding how they fit together. My Express application launches Webpack and serves my root index.html file as follows:
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) => { if (!req.cookies.access_token) return res.redirect("/login"); return res.sendFile(path.join(__dirname, "index.html")); });
My root index file has the tag “root” in the body and the web package “/static/bundle.js” in the script tag. The root tag points to my index.js file, linked in bundle.js, and everything displays correctly. It all works great.
My problem is that I am trying to include my favicon.ico in my root index.html, which is not related to Webpack, so I want to serve it as a static file with Express, which I usually do with code:
app.use("/some/path", express.static(path.join(__dirname, "/public")));
Unfortunately, this folder does not access the client, and I cannot access my icon outside of the Webpack package (which my index.html does not have discretionary access to). In fact, I'm not trying to expose anything to the client this way. Is there something I don’t understand about webpack-dev-middleware, or how the Express server works with Webpack? What gives?
D Vorona
source share