webpack热更新运行失败。

Question

1.我的版本

"webpack": "^4.36.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"

2.错误信息：

C:UsersTHINKDesktopwebpack-hotflash>npm run dev

webpack-hotflash@1.0.0 dev C:UsersTHINKDesktopwebpack-hotflash
webpack-dev-server --mode development

C:UsersTHINKDesktopwebpack-hotflashwebpack.config.js:11
devServer: {//配置此静态文件服务器，可以用来预览打包后项目

     ^（说明一下，是说指着的‘:’有问题。）

SyntaxError: Unexpected token :

at Module._compile (internal/modules/cjs/loader.js:721:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at WEBPACK_OPTIONS (C:\Users\THINK\Desktop\webpack-hotflash\node_modules\_webpack-cli@3.3.6@webpack-cli\bin\utils\convert-argv.js:116:13)
at requireConfig (C:\Users\THINK\Desktop\webpack-hotflash\node_modules\_webpack-cli@3.3.6@webpack-cli\bin\utils\convert-argv.js:118:6)
at C:\Users\THINK\Desktop\webpack-hotflash\node_modules\_webpack-cli@3.3.6@webpack-cli\bin\utils\convert-argv.js:125:17

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
webpack-hotflash@1.0.0 dev: webpack-dev-server --mode development
npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the
webpack-hotflash@1.0.0 dev script. npm ERR! This is probably not a
problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
C:UsersTHINKAppDataRoamingnpm-cache_logs2019-07-18T08_18_53_733Z-debug.log

3.做过的尝试

前往官网中文文档，查找 webpack-dev-server，发现找不到热更新说明。

4.背景

我是从https://blog.csdn.net/sinat_1...，这篇博客开始尝试学习webpack的，对里面的热更新比较感兴趣，于是开始尝试。

5.详细配置文件

配置webpack.config.js文件

const webpack = require("webpack");
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './index.html',
    }),
    new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
    // 热更新，热更新不是刷新
    new webpack.HotModuleReplacementPlugin()
],
devServer: {//配置此静态文件服务器，可以用来预览打包后项目
    inline:true,//打包后加入一个websocket客户端
    hot:true,//热加载
    contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
    host: 'localhost',//主机地址
    port: 9090,//端口号
    compress: true//开发服务器是否启动gzip等压缩
},

配置package.json

"scripts": {
  "dev": "webpack-dev-server --mode development"
},

和那篇博客是一样的。

Answer 1

解决办法就是，先把webpack，webpack-cli，webpack-dev-server，这三个删掉。
按照这个教程的做法去做。

Answer 2

看 csdn 当教程，坑里有屎你往里跳。
官方文档：https://webpack.js.org/config...
官方中文：https://webpack.docschina.org...

Answer 3

把配置文件和错误信息全部粘贴出来啊，现在给的信息没啥用（除了版本）