1 | # React Refresh Webpack Plugin
|
2 |
|
3 | An **EXPERIMENTAL** Webpack plugin to enable "Fast Refresh" (also previously known as _Hot Reloading_) for React components.
|
4 |
|
5 | ## Installation
|
6 |
|
7 | First - this plugin is not 100% stable.
|
8 | It works pretty reliably, and we have been testing it for some time, but there are still edge cases yet to be discovered.
|
9 | Please **DO NOT** use it if you cannot afford to face breaking changes in the future.
|
10 |
|
11 | ```sh
|
12 | # if you prefer npm
|
13 | npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh
|
14 |
|
15 | # if you prefer yarn
|
16 | yarn add -D @/react-refresh-webpack-plugin react-refresh
|
17 | ```
|
18 |
|
19 | ## Usage
|
20 |
|
21 | First, apply the plugin in your Webpack configuration as follows:
|
22 |
|
23 | **webpack.config.js**
|
24 |
|
25 | ```js
|
26 | const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
27 | // ... your other imports
|
28 |
|
29 | module.exports = {
|
30 | // ... other configurations
|
31 | plugins: [
|
32 | // ... other plugins
|
33 | new ReactRefreshWebpackPlugin(),
|
34 | ],
|
35 | };
|
36 | ```
|
37 |
|
38 | Then, update your Babel configuration.
|
39 | This can either be done in your Webpack config (via options of `babel-loader`), or in the form of a `.babelrc`/`babel.config.js`.
|
40 |
|
41 | **webpack.config.js** (if you choose to inline the config)
|
42 |
|
43 | ```js
|
44 | module.exports = {
|
45 | module: {
|
46 | rules: [
|
47 | // ... other rules
|
48 | {
|
49 | // for TypeScript, change the following to "\.[jt]sx?"
|
50 | test: /\.jsx?$/,
|
51 | exclude: /node_modules/,
|
52 | use: [
|
53 | // ... other loaders
|
54 | {
|
55 | loader: require.resolve('babel-loader'),
|
56 | options: {
|
57 | // ... other options
|
58 | // DO NOT apply the plugin in production mode!
|
59 | plugins: [require.resolve('react-refresh/babel')],
|
60 | },
|
61 | },
|
62 | ],
|
63 | },
|
64 | ],
|
65 | },
|
66 | };
|
67 | ```
|
68 |
|
69 | **.babelrc** (if you choose to extract the config)
|
70 |
|
71 | ```json5
|
72 | {
|
73 | plugins: ['react-refresh/babel'],
|
74 | }
|
75 | ```
|
76 |
|
77 | ## Options
|
78 |
|
79 | This plugin accepts a few options that are specifically targeted for advanced users.
|
80 | The allowed values are as follows:
|
81 |
|
82 | | Name | Type | Default | Description |
|
83 | | :-----------------------: | :-------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------- |
|
84 | | **`disableRefreshCheck`** | `boolean` | `false` | Disables detection of react-refresh's Babel plugin. Useful if you have a Babel setup that is not entirely controlled by Webpack. |
|
85 | | **`forceEnable`** | `boolean` | `false` | Enables the plugin forcefully. Useful if you want to use the plugin in production, for example. |
|
86 |
|
87 | ## Related Work
|
88 |
|
89 | - [Initial Implementation by @maisano](https://gist.github.com/maisano/441a4bc6b2954205803d68deac04a716)
|