使用webpack热更新后控制台一直提示__webpack__hmr404未找到？

Question

1.我使用webpacak-dev-server和webpack.HotModuleReplacementPlugin来实现的热更新，之前在官网看到的例子是除了配置webpack.config.js外还要在js中写

// 模块热替换的 API
if (module.hot) {
  module.hot.accept('./components/App', () => {
    render(App)
  });
}

还需要写这个判断来决定是否热更新，我照着写了最后实现了热更新，但是又听说不用这样写也可以，于是就找到了需要在入口文件配置webpack-hot-middleware，这个包可以实现于是我就按照网上的思路来了一遍但是跑起来后热更新是可以实现，但是就是一直报错，而且热更新很慢好久才出来

const path = require('path');
let webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: ['./src/main.js', 'webpack-hot-middleware/client?reload=true'],
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        hot: true,
        inline: true
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new htmlWebpackPlugin({
            template: './index.html',
            inject: 'body',
            hash: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        // 开启全局的模块热替换（HMR）

        new webpack.NamedModulesPlugin(),
        // 当模块热替换（HMR）时在浏览器控制台输出对用户更友好的模块名字信息
    ]
}

pack.json

{
    "name": "demo1",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "nodemon --watch webpack.config.js --exec \" webpack-dev-server --open\" "
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.25.0",
        "babel-loader": "^7.0.0",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^0.28.4",
        "html-webpack-plugin": "^2.28.0",
        "style-loader": "^0.18.2",
        "uglify-js": "^2.8.28",
        "uglifyjs-webpack-plugin": "^0.4.3",
        "vue": "^2.3.4",
        "vue-loader": "^12.2.1",
        "vue-template-compiler": "^2.3.4",
        "webpack": "^2.2.0",
        "webpack-dev-server": "^2.4.5",
        "webpack-hot-middleware": "^2.18.0"
    }
}

报错提示：

请问如何消除报错，还有我写的是正确使用过热更新的方式吗？