@pmmmwh/react-refresh-webpack-plugin
Advanced tools
@pmmmwh/react-refresh-webpack-plugin - npm Package Compare versions
Comparing version 0.1.1 to 0.1.2
@@ -0,1 +1,5 @@ | ||
| ## 0.1.2 (18 December, 2019) | ||
| - Fixed caching of Webpack loader to significantly improve performance (#22) | ||
| ## 0.1.1 (13 December, 2019) | ||
@@ -2,0 +6,0 @@ |
| { | ||
| "name": "@pmmmwh/react-refresh-webpack-plugin", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "description": "An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
| # React Refresh Webpack Plugin | ||
| [](https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin) | ||
| [](./LICENSE) | ||
| An **EXPERIMENTAL** Webpack plugin to enable "Fast Refresh" (also previously known as _Hot Reloading_) for React components. | ||
@@ -29,5 +32,13 @@ | ||
| // You can tie this to whatever mechanisms you are using to detect a development environment. | ||
| // For example, as shown here, is to tie that to `NODE_ENV` - | ||
| // Then if you run `NODE_ENV=production webpack`, the constant will be set to false. | ||
| const isDevelopment = process.env.NODE_ENV !== 'production'; | ||
| module.exports = { | ||
| // It is suggested to run the plugin in development mode only | ||
| mode: 'development', | ||
| // If you are an advanced user and would like to setup Webpack yourselves, | ||
| // you can also use the `none` mode, | ||
| // but you will need to set `forceEnable: true` in the plugin options. | ||
| mode: isDevelopment ? 'development' : 'production', | ||
| // ... other configurations | ||
@@ -38,4 +49,4 @@ plugins: [ | ||
| // It will simply do nothing. | ||
| new ReactRefreshWebpackPlugin(), | ||
| ], | ||
| isDevelopment && new ReactRefreshWebpackPlugin(), | ||
| ].filter(Boolean), | ||
| }; | ||
@@ -50,5 +61,7 @@ ``` | ||
| ```js | ||
| const isDevelopment = process.env.NODE_ENV !== 'production'; | ||
| module.exports = { | ||
| // DO NOT apply the plugin in production mode! | ||
| mode: 'development', | ||
| mode: isDevelopment ? 'development' : 'production', | ||
| module: { | ||
@@ -68,3 +81,3 @@ rules: [ | ||
| // DO NOT apply the Babel plugin in production mode! | ||
| plugins: [require.resolve('react-refresh/babel')], | ||
| plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean), | ||
| }, | ||
@@ -83,3 +96,3 @@ }, | ||
| module.exports = api => { | ||
| // This caches the Babel config. | ||
| // This caches the Babel config by environment. | ||
| api.cache.using(() => process.env.NODE_ENV); | ||
@@ -91,4 +104,4 @@ return { | ||
| // Applies the react-refresh Babel plugin on development modes only | ||
| ...(api.env('development') ? ['react-refresh/babel'] : []), | ||
| ], | ||
| api.env('development') && 'react-refresh/babel', | ||
| ].filter(Boolean), | ||
| }; | ||
@@ -106,3 +119,3 @@ }; | ||
| | **`disableRefreshCheck`** | `boolean` | `false` | Disables detection of react-refresh's Babel plugin. Useful if you do not parse JS files within `node_modules`, or if you have a Babel setup not entirely controlled by Webpack. | | ||
| | **`forceEnable`** | `boolean` | `false` | Enables the plugin forcefully. Useful if you want to use the plugin in production, for example. | | ||
| | **`forceEnable`** | `boolean` | `false` | Enables the plugin forcefully. Useful if you want to use the plugin in production, or if you are using Webpack's `none` mode without `NODE_ENV`, for example. | | ||
@@ -109,0 +122,0 @@ ## Related Work |
@@ -1,4 +0,8 @@ | ||
| const path = require('path'); | ||
| const { Template } = require('webpack'); | ||
| const { refreshUtils } = require('./runtime/globals'); | ||
| const RefreshModuleRuntime = require('./runtime/RefreshModuleRuntime'); | ||
| const RefreshModuleRuntimeString = Template.getFunctionContent(RefreshModuleRuntime) | ||
| .trim() | ||
| .replace(/^ {2}/gm, '') | ||
| .replace(/\$RefreshUtils\$/g, refreshUtils); | ||
@@ -19,5 +23,2 @@ /** A token to match code statements similar to a React import. */ | ||
| function RefreshHotLoader(source, inputSourceMap) { | ||
| // Add dependency to allow caching and invalidations | ||
| this.addDependency(path.resolve('./runtime/RefreshModuleRuntime')); | ||
| // Use callback to allow source maps to pass through | ||
@@ -27,10 +28,3 @@ this.callback( | ||
| // Only apply transform if the source code contains a React import | ||
| reactModule.test(source) | ||
| ? source + | ||
| '\n\n' + | ||
| Template.getFunctionContent(require('./runtime/RefreshModuleRuntime')) | ||
| .trim() | ||
| .replace(/^ {2}/gm, '') | ||
| .replace(/\$RefreshUtils\$/g, refreshUtils) | ||
| : source, | ||
| reactModule.test(source) ? source + '\n\n' + RefreshModuleRuntimeString : source, | ||
| inputSourceMap | ||
@@ -37,0 +31,0 @@ ); |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.72%
56740
- Number of lines in readme file
- increased by12.38%
118
Worsened metrics
- Lines of code
- decreased by-0.34%
1457
No dependency changes