当我更新到 webpack5 时，出现错误：配置有一个未知的属性“之前”

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

你必须更改before为onBeforeSetupMiddleware. 链接从 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" });
      });
    },
  },
};