webpack3 热更新，保存后请求的数据返回来带有修改的信息，但是页面输出还是原来的信息

Question

页面控制台输出

保存后，请求的数据

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');

const resolve = (dir) => {
    return path.join(__dirname, '..', dir);
};

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'vue-refresh-layout.js',
        path: resolve('dist')
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'examples': resolve('examples')
        }
    },
    devServer: {
        contentBase: resolve('examples'),
        historyApiFallback: true,
        // inline: true,
        hot: true,
        port: 3111,
        overlay: {
            warnings: true,
            errors: true
        }
        // hotOnly: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                include: [resolve('src')]
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                loader: 'eslint-loader',
                include: [resolve('src')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            }
        ]
    },
    plugins: [
        new HtmlPlugin({
            filename: 'index.html',
            template: './examples/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

 index.js

// HMR interface
import printMe from './util.js';

function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');
    element.innerHTML = 'Hello' + 'webpack';
    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;
    element.appendChild(btn);
    return element;
}

let element = component(); // 当 print.js 改变导致页面重新渲染时，重新获取渲染的元素
document.body.appendChild(element);

// HMR interface
if (module.hot) {
    // Capture hot update
    module.hot.accept('./util.js', function() {
        console.log('触发了module.hot.accept');
        printMe();
    });
};

Answer 1

你改了什么，如果是改了state里的数据是不会更新的

Answer 2

是改变printMe函数后，btn仍然绑定的是原来函数的意思吗？（这应该是官网里面的例子？）

如果是，那就在需要更新绑定

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
      
//    printMe();
      document.body.removeChild(element);
      element = component(); // 重新生成ele
      document.body.appendChild(element);

    })
  }

Answer 3

建议看文档遇到问题看后面的解释，后面有解决方法