Comments (12)
another module that works: https://www.npmjs.com/package/webpack-hot-middleware
from webpack-dev-middleware.
webpack-dev-server uses webpack-dev-middleware
You can use HMR, but you need to implement the change notification by yourself.
from webpack-dev-middleware.
@bebraw did you ever figure this out? I'm a little confused when @sokra says "you need to implement the change notification by yourself". Could one of you point me in the right direction?
from webpack-dev-middleware.
@bebraw thanks, I'm familiar with the webpack-dev-server
and have used it quite a bit. I'm currently working on a project where they have a small express
server serving frontend assets locally. I've successfully add the webpack-dev-middleware
to the express
server but want to figure out how to get hot module replacement working.
app.use(webpackMiddleware(compiler, {
publicPath: wpConfig.output.publicPath
}));
Generally I use webpack.HotModuleReplacementPlugin
in combo with the config you have above (minus the hot: true
property and
var devScripts = [
'webpack-dev-server/client?http://localhost:' + options.port,
'webpack/hot/only-dev-server',
]
bundled with my entries. If I add the first script 'webpack-dev-server/client?http://localhost:' + options.port
this throws an error in Socket.io
in the webpack-dev-server
I'm assuming what @sokra is talking about above relates to this https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack#from-the-module-view so I guess I just need to dig into the docs more
from webpack-dev-middleware.
Ok, thanks!
I had a look at code. Maybe it would make sense to separate the HMR bit so it's easier to compose but apart from that we can probably consider this issue resolved.
Incidentally I noticed that WebpackDevServer
supports historyApiFallback
argument. Given it was not documented yet, I added a note about it at the docs so it is easier to find.
from webpack-dev-middleware.
👍 Thanks
from webpack-dev-middleware.
@dtothefp Middleware was too low level for my purposes after all. historyApiFallback
did exactly what I needed. I wanted to access the site from any url (not just root) and enabling that helped me to do that. Here's an example without imports:
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
}).listen(port, ip, function (err) {
if(err) {
return console.log(err);
}
console.log('Listening at ' + ip + ':' + port);
});
@dtothefp Can you describe your use case?
from webpack-dev-middleware.
@sokra could you please give me some advice on hot-module-replacement
with webpack-dev-middleware
. I cloned your example app but still didn't completely get it. In that app
module.hot.apply(function(err, renewedModules) {
if(err) return hotResult.text(err.toString());
if(renewedModules) hotResult.text("Renewed modules: " + renewedModules.join(", "));
});
module.hot.status()
continually throws an error (as expected from the docs) because it status !== 'ready'
. But, even if I change code in the /pages
directory which seems to be setup for hot-module-replacement
, nothing seems to update. I setup an example repo and from the code here I thought that all JS in the /views
directory would work with hot-module-replacement
.
var page = require('page');
var views = require('./views');
if(module.hot) {
module.hot.accept('./views', function() {
views = require('./views');
});
}
// start router
page('/', views.home);
page('/download', views.download);
page('/c/:id/:token', views.chat);
page('/:key', views.question);
I'm a little confused from the docs and the example app, as I can't figure out what handlers to apply to create hot-module-replacement
with scripts using the webpack-dev-middleware
from webpack-dev-middleware.
@dtothefp You need to call module.hot.check
first before using module.hot.apply
. The "example-app" is pretty old and the API changed in between.
http://webpack.github.io/docs/hot-module-replacement.html#management-api
from webpack-dev-middleware.
@sokra I actually am calling check
here
https://github.com/dtothefp/webpack-middleware-test/blob/master/lib/index.js#L32
but was getting errors because it kept telling me check
is only allowed in idle
status. It seems some sort of recursive loop because if on page load I call module.hot.status()
the status is "idle"
. But, when I call module.hot.check
the status becomes "check"
and the check
method throws an error in the try/catch
block, as well as passing the error argument to the callback function. It seems the middleware is difficult to setup with hot loading, so I will probably move more towards the technique you mentioned here
gaearon/react-hot-loader#46 (comment)
from webpack-dev-middleware.
hmm... It shouldn't be so complex. Take a look at the file in webpack/hot
which feature some HMR management implementations.
from webpack-dev-middleware.
For anybody that is struggling with getting HMR working, I created a node module that implements HMR on top of webpack-dev-middleware. You can find it here.
from webpack-dev-middleware.
Related Issues (20)
- webpack-dev-middleware/types/index.d.ts requires @types/node@16 when Node.js 12 is still LTS HOT 1
- Problem with filesystem import
- Problem with file system import HOT 1
- Support for multipart range requests HOT 2
- Configurable logging HOT 1
- Bump memfs to 3.4.2 HOT 3
- [5.3.2] .d.ts references dom Request/Response HOT 5
- How to reference in-memory bundle from webpack-dev-middleware ? HOT 2
- Error: EPIPE: broken pipe, write causing livereload to break on Windows HOT 2
- Shared content base for multiple compiler instances HOT 6
- Propuesta
- Nueva propuesta
- Adding Hapi To The Other Servers Section Of README HOT 3
- Incorrect stats position field in res object HOT 10
- Incorrect content type when using typescript worker in dev server HOT 4
- middleware blocks on requests to non-webpack assets HOT 14
- Upgrade memfs HOT 1
- Bump json-joy dependency to new version due to bug fix with reserved windows file names HOT 2
- Address the vulnerability HOT 10
- memorize util printed out CACHE key HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-dev-middleware.