账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack4 + react-hot-loader 修改state页面不能热更新
    26
    0

    按照文档配置 https://github.com/gaearon/re... 当修改文件中的state的name字段时,页面不会更新,但是修改render函数中的button text,页面就会更新?

    "dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js"
    
    

    base config

    const path = require('path');
    const APP_PATH = path.resolve(__dirname, '../app');
    const DIST_PATH = path.resolve(__dirname, '../dist');
    
    module.exports = {
      entry: {
        app: './app/index.js',
        vendors: ['react', 'react-dom']
      },
      output: {
        filename: 'js/bundle.js',
        path: DIST_PATH
      },
      module: {
        rules: [
          {
            test: /\.js?$/,
            use: 'babel-loader',
            include: APP_PATH
          }
        ]
      }
    };
    

    dev config

    
    module.exports = merge(baseWebpackConfig, {
      mode: 'development',
      output: {
        filename: 'js/[name].[hash:16].js'
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: 'public/index.html',
          inject: 'body',
          minify: {
            html5: true
          },
          hash: false
        }),
        new webpack.HotModuleReplacementPlugin()
      ],
      devServer: {
        port: '3015',
        contentBase: path.join(__dirname, '../public'),
        compress: true, // gzip
        historyApiFallback: true,
        hot: true, // 启用 webpack 的模块热替换特性
        https: false,
        noInfo: false,
        open: true, // open the browser
        proxy: {}
      }
    });
    

    index.js

    
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );
    

    App.js

    import React from 'react';
    import { hot } from 'react-hot-loader';
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: 'world',
          show: true
        };
      }
    
      render() {
        return <div>
          {this.state.show && <button>button</button>}
          <h1>Hello, {this.state.name}</h1>
        </div>;
      }
    }
    
    export default hot(module)(App);
    
    
    

    console在代码更新后可以打印log,但是页面不更新,什么原因?

    [WDS] 91% - additional asset processing.
    client:127 [WDS] 92% - chunk asset optimization.
    client:127 [WDS] 92% - after chunk asset optimization.
    client:127 [WDS] 93% - asset optimization.
    client:127 [WDS] 93% - after asset optimization.
    client:127 [WDS] 94% - after seal.
    client:127 [WDS] 95% - emitting.
    client:127 [WDS] 95% - emitting (HtmlWebpackPlugin).
    2VM5824 client:127 [WDS] 98% - after emitting.
    2VM5824 client:127 [WDS] 100% - Compilation completed.
    VM5824 client:218 [WDS] App hot update...
    VM5849 log.js:24 [HMR] Checking for updates on the server...
    client:218 [WDS] App hot update...
    log.js:24 [HMR] Checking for updates on the server...
    log.js:24 [HMR] Nothing hot updated.
    log.js:24 [HMR] App is up to date.
    VM5849 log.js:24 [HMR] Updated modules:
    VM5849 log.js:24 [HMR]  - ./app/App.js
    VM5849 log.js:24 [HMR] App is up to date.
    
    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 更俗 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部