Webpack 5 重大更改“进程/浏览器”

Question

错误的屏幕截图：无法解析“进程/浏览器”：

我希望有人能在这里帮助我。随着 Webpack 5 的 Polyfill 发生重大变化，我能够使用 React-rewired 将后备添加到 config-overrides.js

我 npm 安装了我能安装的所有依赖项，但我仍然收到“进程/浏览器”的错误。我不太确定如何识别问题。

const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    zlib: require.resolve("browserify-zlib"),
    fs: require.resolve("browserify-fs"),
    process: require.resolve("process"),
    buffer: require.resolve("buffer"),
    net: require.resolve("net"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
}; 

Answer 1

我遇到了完全相同的问题，最终发现了这个https://github.com/react-dnd/react-dnd/issues/3425#issuecomment-1214554950。

我添加'process/browser': require.resolve('process/browser')到后备对象中，没有更改任何其他内容，并且它有效。希望它也能为你解决这个问题。

Answer 2

我有一个类似升级的可行解决方案，其中包括以下几行config.override.js：

let plugs = config.plugins;

plugs.push(new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer'],
}));
plugs.push(new webpack.ProvidePlugin({
    process: 'process/browser.js'
}))

这里它调用new webpack.ProvidePlugin(...每个插件，而不是尝试在一个构造函数中创建这两个插件。您上面的代码可能会适应类似的情况：

config.plugins = (config.plugins || []).concat([
  new webpack.ProvidePlugin({
    process: "process/browser",
  }),
  new webpack.ProvidePlugin({
    Buffer: ["buffer", "Buffer"],
  })
]);

...虽然我还没有完全尝试过。