当应用程序中需要配置时，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中间件和webpack-hot中间件以及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));
...

当导入配置文件时，回退属性中的那些模块将被解析并作为数字返回。当config对象被传递给其构造函数时，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");