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"

感谢您的帮助

- RemiM

Answer 1

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

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

我强烈建议你熟悉一下 发布说明。

注意，此次更新包含许多重大变更！

- odddemid

---

更新后仍然无法正常工作，并更改了一些有关配置的内容（例如静态内容）。可能还缺少其他变化。我的意思是，我使用了Webpack 5文档，但没有提到这个兼容性问题，但是谢谢你，我会检查一下的。 - RemiM

webpack 5是新版本，不是所有的README.MD文件都是最新的，因此我建议阅读发布说明。如果你听了我的建议，你就会知道 - "contentBase、contentBasePublicPath、serveIndex、staticOptions、watchContentBase、watchOptions已被移除，取而代之的是static选项"。 - odddemid

我确实听了，并在我的评论中字面上提到了这个静态选项更改，我在测试之前就处理了这些更改，但仍然没有起作用... - RemiM

我有同样的问题，我安装了最新版本并修复了发布说明中提到的所有选项，但它对我也没有刷新页面。 - ghiscoding

通过遵循这些说明 https://github.com/webpack/webpack-dev-server/issues/2758#issuecomment-710086019 修复了重新加载的问题。 - ghiscoding

它可以工作了，非常感谢你，我爱你，已经过去3个小时了。 - Tidris

Answer 2

target: 'web',
devServer: {hot: false}

查看webpack DevServer文档

- Mehrdad Dehghanzadeh