当应用程序需要配置时，Webpack5 阻止回退包被解析

Question

在 Webpack 5 中，移除了核心节点模块的 polyfill，取而代之的是需要在 resolve.fallback 属性中列出所需的包。以下是 webpack.config.client.js 文件的解析属性。

resolve: {
  fallback: {
    path: require.resolve("path-browserify"),
    crypto: require.resolve("crypto-browserify"),
    "babel-polyfill": require.resolve("@babel/polyfill"),
    buffer: require.resolve("buffer/"),
    stream: require.resolve("stream-browserify"),
  }
}

我使用 webpack-dev-middleware 和 webpack-hot-middleware 以及 express 来为我的 ssr 应用程序实现 HMR 的好处。

import express from "express";
import webpack from "webpack";
...
const app = express();
...
const webpackDevConfig = require("../webpack/webpack.config.client");
const compiler = webpack(webpackDevConfig);
app.use(
  require("webpack-dev-middleware")(compiler, {
    publicPath: webpackDevConfig.output.publicPath,
  }),
);
app.use(require("webpack-hot-middleware")(compiler));
...

导入配置文件时，回退属性中的那些模块将被解析并返回为数字。当配置对象被传递给它的构造函数时，webpack 会抛出一个错误，因为 configuration.resolve.fallback 属性应该是非空字符串，但是给出了数字。

下面是实际resolve.fallback属性通过，返回错误

{
  path: 79936 (which suppose to be "/some path/node_module/path/index.js",
  crypto: 32640,
  'babel-polyfill': 71202,
  buffer: 30816,
  stream: 78787
}

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.resolve.fallback should be one of these:
   [object { alias, name, onlyModule? }, ...] | object { <key>: [non-empty string, ...] | false | non-empty string }
   -> Redirect module requests. 
.....

Answer 1

使用Webpack Magic Comment，webpack不会打包导入的库。

const webpackDevConfig = require(/* webpackIgnore: true */ "../webpack/webpack.config.client");

当应用程序需要配置时，Webpack5 阻止回退包被解析

Webpack5 prevent fallback packages from being resolved when config is required in application

webpack

webpack-hot-middleware

webpack-dev-middleware