Question

当我更改root.js上下文时，页面未重新呈现，但控制台日志似乎热重载正常。

的package.json

    {
      "name": "my-pro-for-fun",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --config webpack.config.dev.js",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^15.4.1",
        "react-dom": "^15.4.1"
      },
      "devDependencies": {
        "babel": "^6.5.2",
        "babel-cli": "^6.18.0",
        "babel-core": "^6.18.2",
        "babel-loader": "^6.2.8",
        "babel-plugin-transform-class-properties": "^6.19.0",
        "babel-plugin-transform-react-jsx-source": "^6.9.0",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-latest": "^6.16.0",
        "babel-preset-react": "^6.16.0",
        "babel-preset-stage-0": "^6.16.0",
        "babel-preset-stage-1": "^6.16.0",
        "babel-preset-stage-2": "^6.18.0",
        "react-hot-loader": "3.0.0-beta.6",
        "webpack": "2.1.0-beta.27",
        "webpack-dev-server": "2.1.0-beta.12"
      }
    }

webpack.js

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    "frontend/src/index.js",
  ],

  output: {
    path: resolve(__dirname, "frontend/dist"),
    filename: "bundle.js",
    publicPath: "/",
  },

  resolve: {
    modules: [ "node_modules" ],
    extensions: [".js", ".json", ".jsx", ".css"],
    alias: {frontend:  resolve(__dirname, "frontend")}
  },

  devServer: {
    hot: true,
    // activate hot reloading
    contentBase: resolve(__dirname, "frontend/src"),
    publicPath: "/",
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: ["node_modules"],
        loader: ["react-hot-loader/webpack", "babel-loader"]
      },
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // activates HMR
    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates
  ],

  devtool: "source-map",
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Root from 'frontend/src/root';
import routes from 'frontend/src/routes';
import { AppContainer } from 'react-hot-loader';

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <Root />
    </AppContainer>,
    document.getElementById('container')
  )
};

render();

if (module.hot) {
  module.hot.accept('./root', render);
}

root.js

import React from 'react';

class Root extends React.Component {
  static propTypes = {
  }

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>ros1</div>
    )
  }
}

export default Root;

.babelrc

{
  "presets": [
    "react",
    "latest",
    "stage-0",
    "stage-1",
    "stage-2"
  ],
 "plugins": ["transform-react-jsx-source"],
}

Answer 1

最终我弄明白了，更新index.js如下，现在工作正常

import React from 'react';
import ReactDOM from 'react-dom';
import Root from 'frontend/src/root';
import routes from 'frontend/src/routes';
import { AppContainer } from 'react-hot-loader';

const mountApp = document.getElementById('container');

ReactDOM.render((
  <AppContainer>
    <Root />
  </AppContainer>
), mountApp);

if (module.hot) {
  module.hot.accept('frontend/src/root', () => {
    const NextRootContainer = require('frontend/src/root').default;

    ReactDOM.render((
      <AppContainer>
        <NextRootContainer />
      </AppContainer>
    ), mountApp);
  })

webpack2 react-hot-loader3似乎有效，但页面没有重新渲染

1 个答案: