Problème avec l'actualisation à chaud du webpack ?

Question

Voici la configuration de 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'])
  ])
}

Après avoir exécuté la commande npm run dev, localhost:8080 a bien été ouvert, et il n'y a eu aucune erreur de compilation, mais l'interface suivante est rapidement apparue,

Ce qui suit est le répertoire de démonstration. Je veux juste compiler app.vue sans utiliser le routage. Je veux savoir pourquoi la connexion directe est anormale. Est-ce dû à la configuration ou à d'autres raisons.

Answer 1

Utilisez vue-cli pour initialiser le projet