使用vue的熱載入可以實現區域性內容的重新整理，更改資料後，不會重新整理整個頁面

在webpack.config.js中設定：

對config.devServer中新增屬性hot:true

對config.plugins新增

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

具體設定如圖：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  target: "web",
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(jpg|jpeg|svg|gif|png)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [

    // 新增VueLoaderPlugin，以響應vue-loader

    new VueLoaderPlugin(),
    //在編譯的過程中，以及在頁面上去判斷環境（開發環境、正式環境）
    new webpack.DefinePlugin({
      'process-env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HTMLPlugin()

  ]
}

if (isDev) {
  config.devServer = {
    port: 8000,   //配置埠號
    host: '0.0.0.0',  //讓頁面可以通過本機的ip訪問，也可以使用手機同一區域網內通過ip訪問
    overlay: {
      errors: true  //webpack在編譯的時候如果出現了錯誤，可以在網頁上顯示
    },
    hot: true  //熱載入
  }
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}

module.exports = config