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

我还强烈建议您熟悉发行说明。

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