Chrome浏览器版本升级后webpack-dev-server失效,求助

Chrome升级后版本:
Google Chrome 69.0.3497.92 (正式版本) (64 位)
修订版本 eb2c6d16bcb960cc5c322243c1771713460c4bcf-refs/branch-heads/3497@{#921}
操作系统 Mac OS X
JavaScript V8 6.9.427.22

webpack配置文件如下

let path = require('path')
let webpack = require('webpack')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let ExtractTextPlugin = require('extract-text-webpack-plugin')
let disPath = path.resolve(__dirname, './dist')

let filePaths = {
  js: 'static/js',
  css: 'static/css',
  image: 'static/image'
}

let del = require('del')
del.sync([path.join(disPath, '**')])

let webpackonfig = {
  entry: {
    adfeedback: './src/main.js',
    adinterest: './src/interest.js'
  },
  output: {
    path: disPath,
    hashDigestLength: 8,
    filename: path.join(filePaths.js, '[name].[hash].js')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // hotReload: false
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: path.join(filePaths.image, '[name].[ext]?[hash]')
        }
      },
      {
        test: /\.scss$|\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: path.join(filePaths.css, '[name].[hash].css')
    }),
    new HtmlWebpackPlugin({
      filename: 'adfeedback.html',
      template: './src/template/template-adfeedback.html',
      context: {
        name: 'adfeedback'
      },
      inject: false
    }),
    new HtmlWebpackPlugin({
      filename: 'adinterest.html',
      template: './src/template/template-adinterest.html',
      context: {
        name: 'adinterest'
      },
      inject: false
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'Src': path.join(__dirname, 'src')
    }
  },
  devServer: {
    // historyApiFallback: true,
    hot: true,
    disableHostCheck: true,
    // inline: true,
  },
  performance: {
    hints: false
  },
  devtool: '#cheap-module-eval-source-map'
}

if (process.env.NODE_ENV === 'prod') {
  webpackonfig.devtool = '#source-map'
  webpackonfig.plugins = (webpackonfig.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

module.exports = webpackonfig

npm run dev 执行命令
"dev": "NODE_ENV=dev webpack-dev-server --port 7833 --host 0.0.0.0",

错误如图
clipboard.png

阅读 2.3k
1 个回答

问题已经发现并解决。
原因是在npm run dev的时候设置了host 0.0.0.0导致最后在解析的时候hostname未被解析成localhost
以至于一直访问域名+端口 正确的是应该是localhost+port (域名是我用switchyomega代理的)
故请求失败 出现disconnected
确实是chrome版本存在问题 旧版本chrome在devServer的配置中会覆盖cli中的命令
新版本中 cli中的命令优先级高于devServer
因此 在配置时 相应配置项最好仅配置一次

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进