{"id":13725475,"url":"https://github.com/WebHotelier/webpack-fast-refresh","last_synced_at":"2025-05-07T20:32:35.318Z","repository":{"id":57132649,"uuid":"208666254","full_name":"WebHotelier/webpack-fast-refresh","owner":"WebHotelier","description":"React Fast Refresh plugin and loader for webpack","archived":true,"fork":false,"pushed_at":"2020-08-05T16:51:22.000Z","size":54,"stargazers_count":155,"open_issues_count":2,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-07T10:54:46.935Z","etag":null,"topics":["fast-refresh","loader","plugin","react","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebHotelier.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-15T22:37:02.000Z","updated_at":"2024-09-18T10:59:45.000Z","dependencies_parsed_at":"2022-09-03T03:43:09.585Z","dependency_job_id":null,"html_url":"https://github.com/WebHotelier/webpack-fast-refresh","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebHotelier%2Fwebpack-fast-refresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebHotelier%2Fwebpack-fast-refresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebHotelier%2Fwebpack-fast-refresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebHotelier%2Fwebpack-fast-refresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebHotelier","download_url":"https://codeload.github.com/WebHotelier/webpack-fast-refresh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645381,"owners_count":17346139,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fast-refresh","loader","plugin","react","webpack"],"created_at":"2024-08-03T01:02:24.540Z","updated_at":"2024-11-14T15:31:22.240Z","avatar_url":"https://github.com/WebHotelier.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# webpack-fast-refresh\n\nReact Fast Refresh for `webpack@5+` and `babel@7.9+`\n\n### **_IMPORTANT NOTE_**\n\n**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).**\n\n# Usage\n\n## 1. Install both `react-refresh` and `webpack-fast-refresh`\n\n```bash\nnpm install -D -E @webhotelier/webpack-fast-refresh react-refresh\n# or\nyarn add -D -E @webhotelier/webpack-fast-refresh react-refresh\n```\n\n## 2. Configure webpack\n\nMake the following changes to your `webpack.config.js`:\n\n### a) Register the plugin:\n\n```js\nconst ReactRefreshPlugin = require('@webhotelier/webpack-fast-refresh');\n\nconfig.plugins.unshift(new ReactRefreshPlugin());\n\n// or if you have an object-based config:\n{\n  ...otherSettings,\n  plugins: [new ReactRefreshPlugin(), ...otherplugins];\n}\n```\n\n### b) Place the runtime in front of your entrypoint:\n\nDepending on how you have configured your entry, change it similarly to the following examples:\n\n```diff\n- config.entry = './index.js'; // or\n- config.entry = ['./index.js'];\n+ config.entry = ['@webhotelier/webpack-fast-refresh/runtime.js', './index.js'];\n\n- config.entry = {\n-   import: './index.js', // or\n-   import: ['./index.js'],\n- };\n+ config.entry = {\n+   import: ['@webhotelier/webpack-fast-refresh/runtime.js', './index.js'],\n+ };\n\n- config.main.entry = './index.js'; // or\n- config.main.entry = ['./index.js'];\n+ config.main.entry = [\n+   '@webhotelier/webpack-fast-refresh/runtime.js',\n+   './index.js',\n+ ];\n\n{\n  \"entry\": {\n-     \"main\": \"./index.js\" // or\n-     \"main\": [\"./index.js\"]\n+     \"main\": [\"@webhotelier/webpack-fast-refresh/runtime.js\", \"./index.js\"]\n  }\n}\n```\n\n### c) Place the loader in your rule matching React files:\n\n```diff\n{\n  \"module\": {\n    \"rules\": [\n      {\n        \"test\": /\\.jsx$/,\n        \"use\": [\n          { \"loader\": \"babel-loader\", \"options\": { \"cacheDirectory\": true } },\n+          { \"loader\": \"@webhotelier/webpack-fast-refresh/loader.js\" }\n        ]\n      }\n    ]\n  }\n}\n```\n\nor push it with code:\n\n```js\n// make sure to use the index of your JSX loader, 0 in this example\nconfig.module.rules[0].use.push('@webhotelier/webpack-fast-refresh/loader.js');\n```\n\n## 3. Configure babel\n\nAdd react-refresh/babel to your babelrc:\n\n```diff\n{\n  \"presets\": [[\"@babel/preset-react\", { \"runtime\": \"automatic\" }]],\n+  \"plugins\": [\"react-refresh/babel\"]\n}\n```\n\n## 4. Configure error-overlay plugin (optional)\n\n```js\nconst ErrorOverlayPlugin = require('@webhotelier/webpack-fast-refresh/error-overlay');\nconfig.plugins.push(new ErrorOverlayPlugin());\n\n// or if you have an object-based config:\n{\n  ...otherSettings,\n  plugins: [new ErrorOverlayPlugin(), ...otherplugins];\n}\n```\n\n## 5. Launch the server\n\nMake sure you have [HMR](https://webpack.js.org/concepts/hot-module-replacement/) enabled.\n\n### Using [webpack-dev-server](https://github.com/webpack/webpack-dev-server):\n\n```bash\nwebpack-dev-server --hot --mode development\n```\n\n### Using [webpack-hot-middleware](https://github.com/webpack-contrib/webpack-hot-middleware):\n\nIn `webpack.config.js`:\n\n```javascript\nconfig.entry.main.unshift(require.resolve('webpack-hot-middleware/client'));\nconfig.plugins.push(new webpack.HotModuleReplacementPlugin());\n```\n\nIn your node server:\n\n```javascript\nif (app.get('env') === 'development') {\n  const webpack = require('webpack');\n  const webpackConfig = require('./webpack.config.json');\n  const webpackCompiler = webpack(webpackConfig);\n\n  app.use(\n    require('webpack-dev-middleware')(webpackCompiler, {\n      lazy: false,\n      publicPath: webpackConfig.output.publicPath,\n      headers: { 'Access-Control-Allow-Origin': '*' },\n    })\n  );\n\n  app.use(\n    require('webpack-hot-middleware')(webpackCompiler, {\n      path: '/__webpack_hmr',\n      heartbeat: 10 * 1000,\n      noInfo: false,\n      quiet: false,\n    })\n  );\n}\n```\n\n# Common Issues\n\n## html-webpack-plugin\n\nThis plugin is not compatible with `html-webpack-plugin` at the moment.\n\n## Production problems\n\nThe above plugin \u0026 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.\n\n# References\n\n- [@next/react-refresh-utils](https://github.com/zeit/next.js/tree/canary/packages/react-refresh-utils)\n- [@pmmmwh/react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin)\n- [Implementation by @maisano](https://gist.github.com/maisano/441a4bc6b2954205803d68deac04a716)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebHotelier%2Fwebpack-fast-refresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebHotelier%2Fwebpack-fast-refresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebHotelier%2Fwebpack-fast-refresh/lists"}