webpack-devServer 4.0运行报错 「static heartbeatInterval = 1000;」

楼主的webpack和node各版本如下

  "webpack-dev-server": "^4.3.1"
   "webpack": "^5.58.2",
   "webpack-cli": "^4.9.0"
   "node":'10"

在常规的webpack配置后运行devserver报如下错误。这一份配置文件在我另一个老项目中是可以正常运行的。在查了官网后发现原来是devserver升级到4以后对环境的要求变了。Node版本过低。

[webpack-cli] /Users/xufujun/Desktop/ecode_workspace/firework/node_modules/webpack-dev-server/lib/servers/WebsocketServer.js:10
  static heartbeatInterval = 1000;
                           ^

SyntaxError: Unexpected token =
    at new Script (vm.js:83:7)
    at NativeCompileCache._moduleCompile (/Users/xufujun/Desktop/ecode_workspace/firework/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
    at Module._compile (/Users/xufujun/Desktop/ecode_workspace/firework/node_modules/v8-compile-cache/v8-compile-cache.js:184:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789: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:692:17)
    at require (/Users/xufujun/Desktop/ecode_workspace/firework/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Server.getServerTransport (/Users/xufujun/Desktop/ecode_workspace/firework/node_modules/webpack-dev-server/lib/Server.js:1009:28)

文档地址

基于文档的描述，楼主因为电脑上装的有nvm，所以使用nvm运行nvm use 12 将node版本切换到12 。然后该问题就解决了。

楼主的配置文件

const { resolve } = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  mode: 'development', //通过配置是开发环境还是生产环境，webpack会有不同的优化策略
  entry: {
    index: './src/main.js',
  },
  output: {
    filename: 'js/[index]-[hash:5].js',
    path: resolve(__dirname, 'dist'),
    assetModuleFilename: 'assets/[name][ext][query]',
    clean: true
  },
  // webpack-dev-server need webpack-dev-server plugin
  devServer: {
    // 设置端口
    static: './dist/',
    port: 1300,
    open: true,
    hot: true
  },
  module: {
    rules: [{
      test: /\.(less|css)$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
      },
      ],
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif|mp3)$/i,
      type: 'asset/resource',
    },
    {
      test: /\.html$/i,
      use: [{
        loader: 'html-loader',
      }]
    }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name]-[hash:5].css'
    })
  ],
  resolve: {
    // 配置可以忽略那些类型的文件后缀。
    extensions: [
      '.js', '.ts'
    ],
    modules: [
      resolve(__dirname, './node_modules'), 'node_modules'
    ]
  }
};