React-webpack2-thermal module replacement [HMR], react-webpack2-hmr

React-webpack2-thermal module replacement [HMR], react-webpack2-hmr

This article introduces the react-webpack2-hot module replacement [HMR], share with you, the details are as follows:

The module hot replacement function replaces, adds, or deletes a module while the application is running, without reloading the page. This allows you to update independent modules without refreshing the entire page, greatly accelerating the development time.

Babel Configuration

Download npm install --save-dev react-hot-loader@3.0.0-beta.6

Then configure in. babelrc

{"Presets": [["es2015", {"modules": false}], // disable "stage-2", "react"] in webpack 2 in this way, "plugins": ["react-hot-loader/babel" // module hot replacement (HMR) with React Code enabled]}

Webpack Configuration

Entry insertion module hot replacement

Entry: {app: ['react-hot-loader/patch ', // enable the react code module hot replacement (HMR) 'webpack-dev-server/client? Http: // localhost: 8080 ', // pack the code for the webpack-dev-server environment and then connect to the specified server domain name and port, you can change it to the local ip address 'webpack/hot/only-dev-Server', // for hot replacement (HMR) package the code // only-indicates that hot replacement (HMR) is executed only after the code is successfully updated )'. /index. js' // portal file of our app], vendor: ['react ', 'react-router'] // public file packaging}

PublicPath for exit configuration (required)

Output: {path: defPath. DEV_PATH, // target path of all output files filename: 'js/bundle. js', publicPath: '/', chunkFilename: '[name]. chunk. js '},

Add plug-ins

Plugins: [new webpack. HotModuleReplacementPlugin (), // enable global module hot replacement (HMR) new webpack. NamedModulesPlugin () // name beautification of the console output module]

Configure HMR for devServer

DevServer :{//... other configuration hot: true, // enable the server's module hot replacement (HMR) contentBase: defPath. DEV_PATH, // publicPath of the output file: '/' // consistent with the publicPath of output}

Modify in application code

A lot of changes are required in the application code.

Split the original entry file

Create a new root component to store the routing configuration in the original entry file

/* Root, Router configuration */import React from 'react '; import {Provider} from 'react-redux'; import {browserHistory, Router} from 'react-router '; import {syncHistoryWithStore} from 'react-router-redux '; import store from '.. /store/Index'; // import the configured store import routes from '.. /routes. js'; // sublevel route configuration // create an enhanced version of history to combine the store synchronization navigation event const browhistory = syncHistoryWithStore (browserHistory, store); const Root = () ==>( <Provider store = {store}> <div> <Router history = {browhistory} routes = {routes}/> </div> </Provider> ); export default Root;

Change the original entry file

/* App/js/index. js entry file, configure the webpack hot loading module */import '.. /scss/index. scss '; import '.. /scss/commoncom. scss '; import React from 'react'; import ReactDOM from 'react-dom '; import {AppContainer} from 'react-hot-loader '; // introduce the import injectTapEventPlugin from 'react-tap-event-plugin' container provided by react-hot-loader; // import Root from the configuration module that introduces the total route '. /containers/root'; // defines the DOM node to be mounted. const mountNode = document. ge TElementById ('app'); // The react plug-in that provides onTouchTap () injectTapEventPlugin (); // encapsulate the render function const render = (Component) =>{ ReactDOM. render (<AppContainer> <Component/> </AppContainer>), mountNode) ;}; // initiate the render (Root) call ); // configure the condition if (module. hot & process. env. NODE_ENV! = 'Production ') {// process changes to a specific dependency module. hot. accept ('. /containers/root', (err) => {if (err) {console. log (err);} // remove the mounted React component from the DOM and reinstall ReactDOM. unmountComponentAtNode (mountNode); render (Root );});}

We can use the webpack 2 module for hot replacement. I hope it will be helpful for everyone's learning, and I hope you can support the help house a lot.