Webpack 5 开发服务器不会在文件更改时重新加载

如何解决Webpack 5 开发服务器不会在文件更改时重新加载

我对 webpack 很陌生，所以请放纵一下，但我不明白为什么在检测到修改时它没有重新加载页面。使用一些旧版本的 webpack 只需运行 webpack-dev-server 就足够了，但使用这些最新版本我无法到达那里。

这是我的配置：

const path = require('path')
 
module.exports = {
    entry: './src/index.js',output: {
        path: path.resolve(__dirname,'public/scripts'),filename: 'bundle.js'
    },module: {
        rules: [
          {
            test: /\.m?js$/,exclude: /node_modules/,use: {
              loader: 'babel-loader',options: {
                presets: [
                  ['@babel/preset-env']
                ]
              }
            }
          }
        ]
    },target: ['web','es5'],devServer: {
      contentBase: path.resolve(__dirname,'public'),watchContentBase: true
    },devtool: 'source-map'
}

这是我的脚本：

"scripts": {"dev": "webpack serve --mode=development"}

我正在运行的版本：

"webpack": "^5.11.0","webpack-cli": "^4.3.0","webpack-dev-server": "^3.11.0"

感谢您的帮助

解决方法

您需要更新 webpack-dev-server，已安装的版本不支持 webpack 5。

npm install --save-dev webpack-dev-server@next

我还强烈建议您熟悉 Release Note。

请注意更新包含许多重大更改！