webpack dev server刷新页面出错，且无法热重载

Question

学习Vue的时候顺便想着不依赖Vue Cli，自己配置一遍webpack，但是发现出了很多问题。

1. 我根据网上的文档配置了热重载，但是发现当我改变vue单页文件之后，没有热重载，而是刷新了页面。
2. 我发现我只能刷新首页，当我刷新除去首页的其他页面时，都会报错：

Cannot GET /xxx（xxx是路径名）

下面是我的相关配置：
webapck.base.conf.js:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const AutoDllPlugin = require('autodll-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// const isProduction = process.env.NODE_ENV == 'production'

module.exports = {
  entry: {
    bundle: path.resolve(__dirname, '../src/index.js'),
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, '../dist'),
    chunkFilename: '[id].chunk.js',
    // publicPath: 'production' == process.env.NODE_ENV ? '/' : '',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },

      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },

      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          'postcss-loader',
        ]
      },

      {
        test: /\.scss$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ]
      },

      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      },

      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html')
    }),
    new VueLoaderPlugin(),
    new AutoDllPlugin({
      inject: true, //  自动把打包出来的第三方库文件插入到HTML
      debug: true,
      filename: '[name]_[hash].js',
      path: './dist',
      entry: {
        vendor: ['vue']
      }
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, '../src')
    },
    extensions: ['.js', '.vue', '.json']
  }
}

webpack.dev.conf.js:

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.conf.js')

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    host: '192.168.12.1',
    port: 8080,
    // contentBase: path.resolve(__dirname, '../dist'),
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})

以下是我的package.json相关配置：

"scripts": {
    "build": "node build/build.js",
    "dev": "webpack-dev-server --hot --progress --color --config build/webpack.dev.conf.js"
  },