Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webhotelier/webpack-fast-refresh
React Fast Refresh plugin and loader for webpack
https://github.com/webhotelier/webpack-fast-refresh
fast-refresh loader plugin react webpack
Last synced: 3 months ago
JSON representation
React Fast Refresh plugin and loader for webpack
- Host: GitHub
- URL: https://github.com/webhotelier/webpack-fast-refresh
- Owner: WebHotelier
- License: mit
- Archived: true
- Created: 2019-09-15T22:37:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-05T16:51:22.000Z (over 4 years ago)
- Last Synced: 2024-09-27T22:20:14.667Z (3 months ago)
- Topics: fast-refresh, loader, plugin, react, webpack
- Language: JavaScript
- Size: 52.7 KB
- Stars: 155
- Watchers: 5
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-fast-refresh
React Fast Refresh for `webpack@5+` and `[email protected]+`
### **_IMPORTANT NOTE_**
**This repository is to be considered _EXPERIMENTAL_. For most use cases we recommend using the officially endorsed webpack plugin available at [pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin).**
# Usage
## 1. Install both `react-refresh` and `webpack-fast-refresh`
```bash
npm install -D -E @webhotelier/webpack-fast-refresh react-refresh
# or
yarn add -D -E @webhotelier/webpack-fast-refresh react-refresh
```
## 2. Configure webpack
Make the following changes to your `webpack.config.js`:
### a) Register the plugin:
```js
const ReactRefreshPlugin = require('@webhotelier/webpack-fast-refresh');
config.plugins.unshift(new ReactRefreshPlugin());
// or if you have an object-based config:
{
...otherSettings,
plugins: [new ReactRefreshPlugin(), ...otherplugins];
}
```
### b) Place the runtime in front of your entrypoint:
Depending on how you have configured your entry, change it similarly to the following examples:
```diff
- config.entry = './index.js'; // or
- config.entry = ['./index.js'];
+ config.entry = ['@webhotelier/webpack-fast-refresh/runtime.js', './index.js'];
- config.entry = {
- import: './index.js', // or
- import: ['./index.js'],
- };
+ config.entry = {
+ import: ['@webhotelier/webpack-fast-refresh/runtime.js', './index.js'],
+ };
- config.main.entry = './index.js'; // or
- config.main.entry = ['./index.js'];
+ config.main.entry = [
+ '@webhotelier/webpack-fast-refresh/runtime.js',
+ './index.js',
+ ];
{
"entry": {
- "main": "./index.js" // or
- "main": ["./index.js"]
+ "main": ["@webhotelier/webpack-fast-refresh/runtime.js", "./index.js"]
}
}
```
### c) Place the loader in your rule matching React files:
```diff
{
"module": {
"rules": [
{
"test": /\.jsx$/,
"use": [
{ "loader": "babel-loader", "options": { "cacheDirectory": true } },
+ { "loader": "@webhotelier/webpack-fast-refresh/loader.js" }
]
}
]
}
}
```
or push it with code:
```js
// make sure to use the index of your JSX loader, 0 in this example
config.module.rules[0].use.push('@webhotelier/webpack-fast-refresh/loader.js');
```
## 3. Configure babel
Add react-refresh/babel to your babelrc:
```diff
{
"presets": [["@babel/preset-react", { "runtime": "automatic" }]],
+ "plugins": ["react-refresh/babel"]
}
```
## 4. Configure error-overlay plugin (optional)
```js
const ErrorOverlayPlugin = require('@webhotelier/webpack-fast-refresh/error-overlay');
config.plugins.push(new ErrorOverlayPlugin());
// or if you have an object-based config:
{
...otherSettings,
plugins: [new ErrorOverlayPlugin(), ...otherplugins];
}
```
## 5. Launch the server
Make sure you have [HMR](https://webpack.js.org/concepts/hot-module-replacement/) enabled.
### Using [webpack-dev-server](https://github.com/webpack/webpack-dev-server):
```bash
webpack-dev-server --hot --mode development
```
### Using [webpack-hot-middleware](https://github.com/webpack-contrib/webpack-hot-middleware):
In `webpack.config.js`:
```javascript
config.entry.main.unshift(require.resolve('webpack-hot-middleware/client'));
config.plugins.push(new webpack.HotModuleReplacementPlugin());
```
In your node server:
```javascript
if (app.get('env') === 'development') {
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.json');
const webpackCompiler = webpack(webpackConfig);
app.use(
require('webpack-dev-middleware')(webpackCompiler, {
lazy: false,
publicPath: webpackConfig.output.publicPath,
headers: { 'Access-Control-Allow-Origin': '*' },
})
);
app.use(
require('webpack-hot-middleware')(webpackCompiler, {
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
noInfo: false,
quiet: false,
})
);
}
```
# Common Issues
## html-webpack-plugin
This plugin is not compatible with `html-webpack-plugin` at the moment.
## Production problems
The above plugin & loader DO NOT check if they are running in production builds and do not automatically disable themselves. Make sure you add the correct checks to only include them in development builds.
# References
- [@next/react-refresh-utils](https://github.com/zeit/next.js/tree/canary/packages/react-refresh-utils)
- [@pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin)
- [Implementation by @maisano](https://gist.github.com/maisano/441a4bc6b2954205803d68deac04a716)