javascript - webpack热刷新的问题？

问题描述

以下是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’]) ])}

执行npm run dev命令后确实打开了localhost:8080，编译也没有错，但是很快出现以下界面，

下面是demo目录，我只是想编译app.vue，没有用到路由，想知道为什么直接连接异常。是配置的原因还是其他的原因。

问题解答

使用vue-cli 初始化项目哈