webpack-hot-middleware
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
ansi-html-community | 0.0.8 | 7.32 kB | Apache-2.0 | prod | |
html-entities | 2.5.2 | 280.65 kB | MIT | prod | |
strip-ansi | 6.0.1 | 1.99 kB | MIT | prod |
Webpack-hot-middleware is a package that enables hot reloading of a JavaScript application during development using webpack. Hot reloading refers to the process where the application, upon modification of the source code, is automatically updated without requiring a complete page reload. It employs webpack's Hot Module Replacement (HMR) API and webpack-dev-middleware to connect a browser client to a webpack server and receive updates. This middleware doesn't handle making your application capable of using hot reloading; that's typically managed with other libraries, like react-transform-hmr or react-hot-loader for React applications.
To use webpack-hot-middleware, you first have to install the NPM package as a development dependency with npm install --save-dev webpack-hot-middleware
. Then, you can add it to your own server by enabling hot reloading in your webpack configuration and adding the middleware to your server:
Enable the HotModuleReplacementPlugin in the plugins array in your webpack config:
plugins: [
new webpack.HotModuleReplacementPlugin(),
]
Add 'webpack-hot-middleware/client'
into the entry
object:
entry: {
main: ['webpack-hot-middleware/client', './src/main.js']
}
Include webpack-dev-middleware and webpack-hot-middleware in your server file:
var webpack = require('webpack');
var webpackConfig = require('./webpack.config');
var compiler = webpack(webpackConfig);
app.use(require("webpack-dev-middleware")(compiler, {
/* Options */
}));
app.use(require("webpack-hot-middleware")(compiler));
Remember to replace './src/main.js'
and './webpack.config'
with your actual main JavaScript file and webpack configuration file paths, respectively.
The webpack-hot-middleware documentation is not extensively available as a separate resource. It's mainly provided within the README file in the package's GitHub repository at git+https://github.com/webpack-contrib/webpack-hot-middleware.git. This README includes installation and usage instructions, as well as configuration options. More comprehensive documentation is said to be coming soon, but at the moment, users are advised to rely mostly on the provided example for understanding how to use the package. Also, there's a troubleshooting section which covers common issues and tips for using the middleware with particular setups or configurations.