What is the HMR

Hot Module Replacement (HMR for short) For modules that you need to update, do a “hot” replacement, which is the seamless updating of a change without the need to refresh the page. If you don’t configure HMR, so every time you change, all need to refresh the page, to see the results after changes, for debugging, is very troublesome, and the efficiency is not high, the key is that you modify the data on the interface, as the refresh the page will be lost, and if there is a similar Webpack hot update mechanism, so, If the code is modified, it will not refresh, but preserve the existing data state and only update and replace the module. That is, the existing data state is preserved and the code changes are visible.

Conclusion:

  • Save the application state when the page loads
  • Update only the changed content to save debugging time
  • Changing styles is faster, almost the same as changing styles in a browser

Install dependencies

$ npm install webpack webpack-dev-server --save-dev
Copy the code

Package. Json:

"Dependencies" : {" webpack ":" ^ 4.41.2 ", "webpack - dev - server" : "^ 3.10.1"},Copy the code

configuration

webpack:

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true,
    historyApiFallback: true,
    compress: true
},
Copy the code

  • If hot is true, hot update is enabled

  • ContentBase tells the server where to provide content. (That is, the root directory of the server startup. The default directory is the current execution directory, which does not need to be set.)

  • When historyApiFallback uses the HTML5 history API, index.html will most likely have to provide this page instead of any 404 response

  • Compress Enables gzip compression for all services

plugins: {
    HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin()
},
Copy the code

Configure the hot update plug-in

module: {
    rules: [
        {
            test: /\.(css|less)$/,
            use: [
                process.env.NODE_ENV == 'development' ? { loader: 'style-loader' } : MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1
                    }
                }
            ]
        }
    ]
},
Copy the code

The Style-loader library implements the HMR interface, and when updates are received through HMR, it replaces the old style with the new style. Use different loaders to distinguish development and production environments.

SRC/index. JSX:

if (module.hot) {
    module.hot.accept();
}
Copy the code

Entry file, add the above code, you can, very simple.

react-hot-loader

React-hot-loader plugin for portal

How to use

The installation

$ npm install react-hot-loader --save-dev
Copy the code

Configuration babelrc

{
  "plugins": ["react-hot-loader/babel"]
}
Copy the code

Mark the root component as a hot export

import { hot } from 'react-hot-loader/root'; const App = () => <div>Hello World! </div>; export default hot(App);Copy the code

Make sure you need the React hot loader before React and the React Dom

// webpack.config.js
module.exports = {
  entry: ['react-hot-loader/patch', './src'],
  // ...
};
Copy the code

Have a problem

  • If you encounterYou cannot change <Router history>, the configuration should be as follows:
import { hot } from 'react-hot-loader/root';
const Routes = () => {};
export default hot(Routes);
Copy the code
  • After hot update is configured, thewebpackAutomatic compilation twice problem, very high probability of occurrence, specific reasons, no analysis, find a clever solution, configuration:
watchOptions: {
    aggregateTimeout: 600
},
Copy the code

It could also be a problem, for example, if you re-import index.js in your index. HTML page, or if you install webpack-dev-server globally, which is the same as the local webpack-dev-server, you can uninstall the global webpack-dev-server.

case

Tristana

blog

Welcome to my blog