Project structure:
- Webpack is building the app into the
public
folder - At the same time I have some static assets located there, like:
public/assets/font-awesome-4.7.0/css/font-awesome.css
What I want:
- I want to run my
express
app with thewebpack-dev-middleware
for the dev purposes - I want that all the requests for the static assets (which are not processed by
webpack
) were served from thepublic
folder
How I tried to do that:
first attempt
app.use(require('webpack-dev-middleware')(compiler, {
stats: { colors: true }
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use('/', feathers.static(app.get('public'))); // express.static
This works good, until you have index.html
in the public
folder. If you have it there - the static one would be served, NOT the one which is the actual version according to the webpack-dev-middleware
.
second attempt
Then I thought - probably I must use express.static
only for the production case, I removed it. Now I was not able to open /assets/font-awesome-4.7.0/css/font-awesome.css
third attempt (hack which works right now)
Finally I made it work, but I'm not satisfied with the current solution. I manually put all the assets
directory into the webpack
realm by extending the webpack config with this:
new CopyWebpackPlugin([
{ from: 'public/assets/', to: 'assets' },
{ from: 'node_modules/bootstrap/dist/', to: 'vendor/bootstrap/dist' }
]),
however this method assumes that one need to point every static file which he wants to be served by webpack-dev-middleware
Any thoughts are appreciated.
Regards,