[英]Webpack5 prevent fallback packages from being resolved when config is required in application
在 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 在將配置 object 傳遞給其構造函數時引發錯誤,因為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.
.....
使用Webpack Magic Comment ,則 webpack 不會捆綁導入的庫。
const webpackDevConfig = require(/* webpackIgnore: true */ "../webpack/webpack.config.client");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.