All Projects → WebHotelier → Webpack Fast Refresh

WebHotelier / Webpack Fast Refresh

Licence: mit
React Fast Refresh plugin and loader for webpack

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Webpack Fast Refresh

Style Loader
Style Loader
Stars: ✭ 1,572 (+914.19%)
Mutual labels:  webpack, loader
Webapp Webpack Plugin
[DEPRECATED] use favicons-webpack-plugin instead
Stars: ✭ 127 (-18.06%)
Mutual labels:  webpack, plugin
Aot Loader
⚠️ [Deprecated] Ahead-of-Time Compiler for Webpack.
Stars: ✭ 121 (-21.94%)
Mutual labels:  webpack, loader
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-32.26%)
Mutual labels:  webpack, loader
Omil
📝Webpack loader for Omi.js React.js and Rax.js components 基于 Omi.js,React.js 和 Rax.js 单文件组件的webpack模块加载器
Stars: ✭ 140 (-9.68%)
Mutual labels:  webpack, loader
Node Hot Loader
Hot module replacement (hot reload) for Node.js applications. Develop without server restarting.
Stars: ✭ 111 (-28.39%)
Mutual labels:  webpack, loader
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-18.06%)
Mutual labels:  plugin, loader
Cypress Webpack Preprocessor
Cypress preprocessor for bundling JavaScript via webpack
Stars: ✭ 93 (-40%)
Mutual labels:  webpack, plugin
Speed Measure Webpack Plugin
⏱ See how fast (or not) your plugins and loaders are, so you can optimise your builds
Stars: ✭ 1,980 (+1177.42%)
Mutual labels:  webpack, plugin
Webpack Internal Plugin Relation
🔎 a tiny tool to show the relation of webpack internal plugins & hooks
Stars: ✭ 135 (-12.9%)
Mutual labels:  webpack, plugin
Fe Blog
前端学习笔记,JavaScript基础,LeetCode,手写API,Vue源码解析,前端面试题
Stars: ✭ 99 (-36.13%)
Mutual labels:  webpack, loader
Workflow
一个工作流平台
Stars: ✭ 1,888 (+1118.06%)
Mutual labels:  webpack, loader
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+786.45%)
Mutual labels:  webpack, plugin
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112 (-27.74%)
Mutual labels:  webpack, loader
Fork Ts Checker Webpack Plugin
Webpack plugin that runs typescript type checker on a separate process.
Stars: ✭ 1,343 (+766.45%)
Mutual labels:  webpack, plugin
Sounds Webpack Plugin
🔊Notify or errors, warnings, etc with sounds
Stars: ✭ 125 (-19.35%)
Mutual labels:  webpack, plugin
Grow Loader
A webpack loader to split class methods by decorators
Stars: ✭ 89 (-42.58%)
Mutual labels:  webpack, loader
Award
⚙基于react的服务端渲染框架
Stars: ✭ 91 (-41.29%)
Mutual labels:  webpack, plugin
Webpack Plugin Hash Output
Plugin to replace webpack chunkhash with an md5 hash of the final file conent.
Stars: ✭ 128 (-17.42%)
Mutual labels:  webpack, plugin
React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (-14.19%)
Mutual labels:  plugin, loader

webpack-fast-refresh

React Fast Refresh for [email protected]+ 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.

Usage

1. Install both react-refresh and webpack-fast-refresh

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:

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:

- 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:

{
  "module": {
    "rules": [
      {
        "test": /\.jsx$/,
        "use": [
          { "loader": "babel-loader", "options": { "cacheDirectory": true } },
+          { "loader": "@webhotelier/webpack-fast-refresh/loader.js" }
        ]
      }
    ]
  }
}

or push it with code:

// 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:

{
  "presets": [["@babel/preset-react", { "runtime": "automatic" }]],
+  "plugins": ["react-refresh/babel"]
}

4. Configure error-overlay plugin (optional)

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 enabled.

Using webpack-dev-server:

webpack-dev-server --hot --mode development

Using webpack-hot-middleware:

In webpack.config.js:

config.entry.main.unshift(require.resolve('webpack-hot-middleware/client'));
config.plugins.push(new webpack.HotModuleReplacementPlugin());

In your node server:

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].