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

Question

我对 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"

感谢您的帮助

Answer 1

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

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

我还强烈建议您熟悉 Release Note .
小心更新包含很多 重大变化 !