Proposal of Webpack 4 and WebpackServe integration
See original GitHub issueIs this a bug report?
No.
Proposal
I just recently solved react-error-overlay
and react-dev-utils/launchEditor
integration with webpack 4 and webpack-serve
.
I created hot-client-plugin.
Would you like me to configure it in the next
branch?
Issue Analytics
- State:
- Created 5 years ago
- Comments:12 (3 by maintainers)
Top Results From Across the Web
To v4 from v3 - webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >webpack-serve-overlay · Issue #4 - GitHub
@shellscape I'm trying to convey that integrating Error Overlay into webpack-serve will not going to be easy task.
Read more >Understanding the Modern Web Stack: Webpack - DevServer ...
It can often be tricky and confusing for newcomers to understand how to integrate Typescript into a webpack configuration, particularly if you ...
Read more >Using Webpack with Spring Boot | Bootify.io
How can we integrate Webpack into our Spring Boot application? Spoiler: in Bootify's Free plan, Spring Boot applications can be initialized ...
Read more >Starting with Webpack 4 and VueJs — A quick-start tutorial.
I started with a #0CJS (Zero-Config JS) where default modes are used, but once I integrated Vue, I added few basic configurations to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@iansu I’m proposing in the next probably major release (
next
branch) of react-scripts to integrate webpack 4 withwebpack-serve
(Koa.js).Currently, the
next
branch uses webpack 4, but still relies onwebpack-dev-server
(Express.js).It is not so easy to integrate
webpack-serve
because it relies onwebpack-hot-client
which do not allows integration ofreact-error-overlay
properly. At the moment their offered Error Overlay solution IMHO is a hack which works with errors.I tried to offer my help to
webpack-serve
guys, but after I shared my excitement withreact-error-overlay
they became resistant and aggressive. They even deleted my last comment which stated it is not cool to have “reputational wars” with others just because they propose better solutions.Anyway, the only option is to completely disable
webpack-hot-client
by settinghotClient
option tofalse
in awebpack-serve
config and to use custom solution as they offered in their reply to me. Therefore, I created hot-client-plugin to address this issue.To integrate
hot-client-plugin
intocreate-react-app
there are needed only a few steps:react-dev-utils/webpackHotDevClient
from the entry array. A modified version will be injected automatically;HotModuleReplacementPlugin
from plugins array. It will be injected automatically;HotClientPlugin
to plugins array;webpack-dev-server
package withwebpack-serve
inpackage.json
file by issuing commandnpm remove webpack-dev-server
and thennpm i webpack-serve
inreact-scripts
folder;webpackDevServer.config.js
towebpackServe.config.js
and adapt it to use withwebpack-serve
with thehotClient
option set tofalse
to disablewebpack-hot-client
completely.It is pretty much all the details about my proposal and changes I’m offering to implement.
What do you think?
@tbassetto This was my first thought, but when I opened
webpack-serve
README.md I found this on the top:This repository has been archived by the owner. It is now read-only.
If you are looking to use React with KOA and/or backend, you can use my package
fullstack-scripts
. Just give me a notice and I will create proper README.md file quickly. I’m going to create a proper starter kit in the nearest future, for those who are seeking React, Redux, Router, Koa or a third party backend or any of mentioned tech combination.Checkout live
fullstack-scripts
use case here