4

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

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

// 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"
4

2 回答 2

6

您必须更改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" });
      });
    },
  },
};
于 2021-09-07T20:30:40.363 回答
1

fxxk，我很愚蠢，当我搜索一些关键词（例如：）时onBeforeSetupMiddleware，我发现了 webpack-dev-server 的 github，它告诉了新版本 4.0.0 beta 的变化。https://github.com/webpack/webpack-dev-server/releases

于 2021-02-06T03:07:50.027 回答