Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc
Solution 1
webpack
As you've described, Webpack is a module bundler, it bundles various module formats primarily so they can be run in a browser. It offers both a CLI and Node API.
webpack-dev-middleware
Webpack Dev Middleware is middleware which can be mounted in an express server to serve the latest compilation of your bundle during development. This uses webpack
's Node API in watch mode and instead of outputting to the file system it outputs to memory.
For comparison, you might use something like
express.static
instead of this middleware in production.
webpack-dev-server
Webpack Dev Server is itself an express server which uses webpack-dev-middleware
to serve the latest bundle and additionally handles hot module replacement (HMR) requests for live module updates in the client.
webpack-hot-middleware
Webpack Hot Middleware is an alternative to webpack-dev-server
but instead of starting a server itself it allows you to mount it in an existing / custom express server alongside webpack-dev-middleware
.
Also...
webpack-hot-server-middleware
Just to confuse things even more, there's also Webpack Hot Server Middleware which is designed to be used alongside webpack-dev-middleware
and webpack-hot-middleware
to handle hot module replacement of server rendered apps.
Solution 2
As of update in 2018 and considering the webpack-dev-server note on its official GitHub page:
Project in Maintenance Please note that webpack-dev-server is presently in a maintenance-only mode and will not be accepting any additional features in the near term. Most new feature requests can be accomplished with Express middleware; please look into using the before and after hooks in the documentation.
What would be the natural choice to build a webpack HMR ?
Related videos on Youtube
Mendes
BY DAY: Working hard to turn ideas into borderline software BY NIGHT: Family, fun, barbecue and rockn´roll - go to sleep and brand new ideas again... C++, Javascript, MEAN, ReactJs, Relay and naturally C++ (never missing it) Forerunner into future.... http://stackrating.com/badge/Mendes
Updated on July 08, 2022Comments
-
Mendes almost 2 years
I'm starting working with
webpack
with anode/express
environment developing aReactJS
server side rendered application withreact-router
. I'm getting very confused about the role of each webpack package for dev and prod (runtime) environments.Here is the summary of my understanding:
webpack
: Is a package, a tool to join together different pieces of an web application and bundle then in a single .js file (normallybundle.js
). The result file is then served in a prod environment to be loaded by the application and contains all necessary components to run the code. Features include shrinking code, minifying, etc.webpack-dev-server
: Is a package that offers a server to process the website files. It also builds a single .js file (bundle.js
) from client components but serves it in memory. It also has the option (-hot
) to monitor all the building files and build a new bundle in memory in case of code changes. The server is served directly in the browser (ex:http:/localhost:8080/webpack-dev-server/whatever
). The combination of in memory loading, hot processing and browser serving let the user get the application updated on browser when the code changes, ideal for development environment.If I have doubts about the above text, I'm really not sure about the content below, so please advise me if necessary
A common problem when using
webpack-dev-server
withnode/express
is thatwebpack-dev-server
is a server, as isnode/express
. That makes this environment tricky to run both the client and some node/express code (an API etc.). NOTE: This is what I've faced but would be great to understand why does that happens in more details...webpack-dev-middleware
: This is a middleware with same functions ofwebpack-dev-server
(inmemory bundling, hot reloading), but in format that can be injected to theserver/express
application. In that way, you have a sort of server (thewebpack-dev-server
) insider the node server. Oops: Is this a crazy dream ??? How can this piece solve the dev and prod equation and makes life simplerwebpack-hot-middleware
: This... Stuck here... found this piece when looking forwebpack-dev-middleware
... No idea how to use it.ENDNOTE: Sorry is there is any wrong thinking. I really need help in order to undestand these variants in a complex environment. If conveninent, please add more packages/data that will build the whole scenario.
-
Joe Clay over 7 yearsNone of the packages listed here are used on the server side in production - they're just developer tools. You'd use
webpack-dev-middleware
(and potentiallywebpack-hot-middleware
) if you wanted to write your own custom development server. Unless there's a specific feature you want thatwebpack-dev-server
doesn't have, you should just use that.
-
-
Bruce Sun almost 6 yearsIt also says
Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.
So you might want to try webpack-serve . -
Alma Alma over 5 yearsThe maintenance note has been removed. So I guess it's recommended again??? Maddening that such an important dev tool has such a terrible maintainer team around it.
-
Anoop D over 5 yearswebpack-serve is deprecated and as @CaptainFogetti said the maintenance note has been removed from webpack-dev-server as of today
-
abelito about 5 yearsFor those in search of front-end vs back-end hot module replacement breakdown, please see this post: stackoverflow.com/questions/46086297/… Xlee does a good job explaining the requirements for each side -- server-side needing a restart, front-end allowing loading in updated javascript bundles.
-
Joe Seifi almost 3 yearswebpack-dev-server is the Official webpack server for dev builds. It is well documented here webpack.js.org/configuration/dev-server/#devserver and even has built-in support for webpack-dev-middleware and http-proxy-middleware via configs. I would recommend using this unless you have a really complex setup in which case you would opt for webpack-dev-middleware