[环境]create-react-app hotreload 配置

Hot Reloading in Create React App Without Ejecting

1.安装
yarn add react-app-rewired react-app-rewire-hot-loader react-hot-loader

2.在根目录建立：config-overrides.js

const rewireReactHotLoader = require('react-app-rewire-hot-loader');module.exports = function override(config, env) {  config = rewireReactHotLoader(config, env);  return config;}

3.修改 /src/index.js

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import registerServiceWorker from './registerServiceWorker';// Add this import:import { AppContainer } from 'react-hot-loader';// Wrap the rendering in a function:const render = Component => {  ReactDOM.render(    // Wrap App inside AppContainer    <AppContainer>      <App />    </AppContainer>,    document.getElementById('root')  );};// Do this onceregisterServiceWorker();// Render oncerender(App);// Webpack Hot Module Replacement APIif (module.hot) {  module.hot.accept('./App', () => {    render(App);  });}

4.修改 package.json 的 npm sript 指令

原本

"scripts": {  "start": "react-scripts start",  "build": "react-scripts build",  "test":  "react-scripts test --env=jsdom"}

改为

"scripts": {  "start": "react-app-rewired start",  "build": "react-app-rewired build",  "test":  "react-app-rewired test --env=jsdom"}