如何Polyfill节点核心模块在webpack 5

Webpack 5不再对节点核心模块进行自动填充。请问怎么修?

break CHANGE:默认情况下，webpack < 5用于为node.js核心模块包含polyfills。现在情况已经不同了。验证你是否需要这个模块，并为它配置一个填充。

当前回答

当从webpack v4升级到v5时，我也得到了这些错误。通过对webpack.config.js进行以下更改来解决

添加的决心。回退财产

删除节点属性

{
resolve: {
  modules: [...],
  fallback: {
    "fs": false,
    "tls": false,
    "net": false,
    "path": false,
    "zlib": false,
    "http": false,
    "https": false,
    "stream": false,
    "crypto": false,
    "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify 
  } 
},
entry: [...],
output: {...},
module: {
  rules: [...]
},
plugins: [...],
optimization: {
  minimizer: [...],
},
// node: {
//   fs: 'empty',
//   net: 'empty',
//   tls: 'empty'
// },
}

从v4升级到v5 => https://webpack.js.org/migrate/5/#clean-up-configuration

2020-11-12 11:07:18

其他回答

对于我(使用React => v17;React脚本=> v5;webpack => v5)，由@Letton和@Richie Bendall建议的解决方案组合与另一个附加，即包一起工作。Json中，必须添加并安装以下包。还请注意fs版本“^2.0.0”抛出一个错误，因此更改为“0.0.1-security”。

"assert": "^2.0.0", 
"https-browserify": "^1.0.0", 
"os": "^0.1.2",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.1.9",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"fs":"^0.0.1-security",
"crypto-browserify": "3.12.0",
"buffer":"^6.0.3",
"node-polyfill-webpack-plugin": "^2.0.1"

安装完这些后，执行剩下的步骤，即将config-override .js添加到根目录，并更改包中的脚本内容。从react-scripts到react-app-rewired的Json修复了这个问题。

2022-08-30 16:43:24

使用node-polyfill-webpack-plugin重新添加对Node.js核心模块的支持:

安装包后，将以下内容添加到webpack.config.js中:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

2021-01-04 02:20:35

我想这里的大部分答案都能解决你的问题。然而，如果你的节点开发不需要Polyfills，那么我建议在Webpack模块配置中使用target: 'node'。这帮我解决了这个问题。

这里有一些关于答案的文档:https://webpack.js.org/concepts/targets/

2021-02-21 20:15:50

你需要React => v17 React脚本=> v5 webpack => v5

解决问题

1)安装

"fs": "^2.0.0",  // npm i fs
"assert": "^2.0.0",  // npm i assert
"https-browserify": "^1.0.0", // npm i https-browserify
"os": "^0.1.2", // npm i os
"os-browserify": "^0.3.0", // npm i os-browserify
"react-app-rewired": "^2.1.9", //npm i react-app-rewired
"stream-browserify": "^3.0.0", // stream-browserify
"stream-http": "^3.2.0", //stream-http

2)在根目录下创建config-override .js 图像

3)在config-override .js中添加配置

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

3)更改packages.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
}

问题解决了:)

2022-01-14 15:20:44