https://github.com/react-doc/webpack-hot-dev-clients
This is an alternative client for WebpackDevServer that shows a syntax error overlay.
https://github.com/react-doc/webpack-hot-dev-clients
rdoc react-doc webpack webpack-dev-server webpack3 webpack4 webpackdevserver
Last synced: 27 days ago
JSON representation
This is an alternative client for WebpackDevServer that shows a syntax error overlay.
- Host: GitHub
- URL: https://github.com/react-doc/webpack-hot-dev-clients
- Owner: react-doc
- Created: 2017-12-30T12:07:09.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-20T19:38:53.000Z (about 7 years ago)
- Last Synced: 2025-10-01T21:18:18.807Z (5 months ago)
- Topics: rdoc, react-doc, webpack, webpack-dev-server, webpack3, webpack4, webpackdevserver
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
webpack-hot-dev-clients
---
> `webpack-hot-dev-clients` form [react-dev-utils](https://github.com/facebook/create-react-app/tree/master/packages/react-dev-utils).
This alternative [WebpackDevServer](https://github.com/webpack/webpack-dev-server) combines the functionality of:
> 1. It only supports their simplest configuration (hot updates on same server).
> 2. It makes some opinionated choices on top, like adding a syntax error overlay that looks similar to our console output.
It currently supports only Webpack 3.x above.
```bash
npm i webpack-hot-dev-clients
```
Webpack development config
```diff
module.exports = {
entry: [
// You can replace the line below with these two lines if you prefer the
// stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
+ require.resolve('webpack-hot-dev-clients/webpackHotDevClient'),
"./src/index.js"
],
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
+ hot: true
},
plugins: [
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
+ new webpack.NamedModulesPlugin(),
+ new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
```