Problem mit Webpack-Hot-Refresh?

Question

Das Folgende ist die Konfiguration von Webpack

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require("clean-webpack-plugin")
const vendorCSS = new ExtractTextPlugin('css/vendor.css')
const appCSS = new ExtractTextPlugin('css/app.css')
module.exports = function() {
  return {
    entry: {
      app: './main.js',
      vender: ['vue']
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
    },
    resolve:{
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.vue']
    },
    module:{
        rules: [
            {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: appCSS.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test:/\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[ext]'
          }
        },
            {
            test: /\.css$/,
            use: vendorCSS.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'postcss-loader']
            })
            },
            
        ]
    },
    devtool: (process.env.NODE_ENV === 'production') ? '#source-map' : false,
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: Infinity
      }),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
      }),
      vendorCSS,
      appCSS
    ]
  }
}

if (process.env.NODE_ENV === 'development') {
    module.exports.devServer = {
      historyApiFallback: true,
      hot: true,
      inline: true
    }
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.HotModuleReplacementPlugin()
    ])
}

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: false,
        compress: {
            warnings: false
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      }),
      new CleanWebpackPlugin(['dist'])
  ])
}

Nachdem der Befehl npm run dev ausgeführt wurde, wurde localhost:8080 tatsächlich geöffnet und es gab keinen Fehler beim Kompilieren, aber die folgende Schnittstelle erschien bald:

Das Folgende ist das Demoverzeichnis. Ich möchte nur app.vue kompilieren, ohne Routing zu verwenden. Ich möchte wissen, warum die direkte Verbindung abnormal ist. Liegt es an der Konfiguration oder anderen Gründen?

Answer 1

使用vue-cli 初始化项目哈