webpack3 熱更新，保存后請(qǐng)求的數(shù)據(jù)返回來帶有修改的信息，但是頁(yè)面輸出還是原來的信息

頁(yè)面控制臺(tái)輸出

保存后，請(qǐng)求的數(shù)據(jù)

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(); // 當(dāng) print.js 改變導(dǎo)致頁(yè)面重新渲染時(shí)，重新獲取渲染的元素
document.body.appendChild(element);

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