when i update to webpack5, there is a error: configuration has an unknown property 'before'

Question

当我将 webpack 4 更新到 5 时，错误退出。

我有一个 webpackDevServer.js，其中包含错误消息 'error'

// webpackDevServer.js
module.exports = function(proxy, allowedHost) {
    return {
        before(app, server) {
            if (fs.existsSync(paths.proxySetup)) {
                // This registers user provided middleware for proxy reasons
                require(paths.proxySetup)(app);
            }

            // This lets us fetch source contents from webpack for the error overlay
            app.use(evalSourceMapMiddleware(server));
            // This lets us open files from the runtime error overlay.
            app.use(errorOverlayMiddleware());

            // This service worker file is effectively a 'no-op' that will reset any
            // previous service worker registered for the same host:port combination.
            // We do this in development to avoid hitting the production cache if
            // it used the same host and port.
            // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
            app.use(noopServiceWorkerMiddleware());
        },
    };
};

我在start.js文件中使用上述文件，当我运行项目时，我输入node scripts/start.js

// start.js
...
const createDevServerConfig = require('../config/webpackDevServer.config');
...
const serverConfig = createDevServerConfig(
      proxyConfig,
      urls.lanUrlForConfig
);
const devServer = new WebpackDevServer(compiler, serverConfig);

然后它抛出一个错误

configuration has an unknown property 'before'. These properties are valid:
object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }

这是我的 package.json

"webpack": "^5.20.2",
"webpack-dev-server": "^4.0.0-beta.0",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "^6.1.0"

Answer 1

fxxk，我傻了，当我搜索某个关键字时（例如：onBeforeSetupMiddleware），我发现webpack-dev-server的github 告诉新版本4.0的变化.0 测试版。 https://github.com/webpack/webpack-dev-server/releases

Answer 2

您必须将 before 更改为 onBeforeSetupMiddleware。 Link 包含从 v3 到 v4 的迁移说明。 https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

以防万一，迁移指南上的某些内容会发生变化，详细信息附在下面

v3:

module.exports = {
  devServer: {
    after: function (app, server, compiler) {
      app.get("/some/path", function (req, res) {
        res.json({ custom: "response" });
      });
    },
  },
};

v4:

module.exports = {
  devServer: {
    onAfterSetupMiddleware: function (devServer) {
      devServer.app.get("/some/path", function (req, res) {
        res.json({ custom: "response" });
      });
    },
  },
};

when i update to webpack5, there is a error: configuration has an unknown property 'before'

when i update to webpack5, there is a error: configuration has an unknown property 'before'

webpack-5