webpack 4 require未定义

Question

我正在一个monorepo内从事两个项目。这两个项目具有完全相同的依赖关系，并且每个项目都有一个webpack.config.js。两者的配置完全相同。但是，在其中一个Webpack项目中添加了require('../../node_modules/process/browser')，这会导致以下错误：Uncaught ReferenceError: require is not defined。

我不知道为什么会这样，所以请多加一些新的想法和建议。我的配置如下：

[
    {
        "devtool": "eval",
        "entry": {
            "main": "index.web.js"
        },
        "mode": "development",
        "module": {
            "rules": [
                {
                    "exclude": /node_modules\/(?!(@bs)\/)/,
                    "loader": "babel-loader",
                    "options": {
                        "plugins": [
                            "@babel/plugin-syntax-dynamic-import"
                        ],
                        "presets": [
                            "@babel/preset-flow",
                            [
                                "@babel/preset-env",
                                {
                                    "targets": "last 2 versions, not dead",
                                    "useBuiltIns": "usage"
                                }
                            ],
                            "@babel/preset-react"
                        ]
                    },
                    "test": /(\.jsx?|\.mjs)$/
                },
            ]
        },
        "name": "client",
        "optimization": {
            "splitChunks": {
                "cacheGroups": {
                    "commons": {
                        "chunks": "initial",
                        "enforce": true,
                        "name": "vendor",
                        "test": /node_modules\/(?!(@bs)\/)/
                    }
                }
            }
        },
        "output": {
            "chunkFilename": "js/[name].[chunkhash].js",
            "filename": "js/[name].[chunkhash].js",
            "path": "public/build",
            "publicPath": "/build/"
        },
        "plugins": [
            new webpack.EnvironmentPlugin({
                APP_ENV: 'browser',
                CI: null,
            }),
            new MiniCssExtractPlugin({
                chunkFilename: css/[id].[contenthash].css,
                filename: css/[name].[contenthash].css,
            }),
            new SvgStorePlugin(),
            new DotenvPlugin(),
            new ManifestPlugin(),
        ],
        "resolve": {
            "extensions": [
                ".js",
                ".jsx",
                ".mjs",
                ".scss"
            ]
        },
        "stats": {
            "children": false,
            "colors": true,
            "modules": false,
            "reasons": true
        },
        "target": "web",
        "watch": true,
        "watchOptions": {
            "ignored": /node_modules/
        }
    },
    {
        "devtool": "eval",
        "entry": {
            "main": "index.server.js"
        },
        "externals": /^[a-z\-0-9]+$/,
        "mode": "development",
        "module": {
            "rules": [
                {
                    "exclude": /node_modules\/(?!(@bs)\/)/,
                    "loader": "babel-loader",
                    "options": {
                        "plugins": [
                            "@babel/plugin-syntax-dynamic-import"
                        ],
                        "presets": [
                            "@babel/preset-flow",
                            [
                                "@babel/preset-env",
                                {
                                    "targets": "node 8",
                                    "useBuiltIns": "usage"
                                }
                            ],
                            "@babel/preset-react"
                        ]
                    },
                    "test": /(\.jsx?|\.mjs)$/
                },
            ]
        },
        "name": "server",
        "output": {
            "chunkFilename": "js/[name].js",
            "filename": "js/[name].js",
            "libraryTarget": "commonjs2",
            "path": "server/build",
            "publicPath": "/build/"
        },
        "plugins": [
            new webpack.EnvironmentPlugin({
                APP_ENV: 'server',
                CI: null,
            }),
            new MiniCssExtractPlugin({
                chunkFilename: css/[id].[contenthash].css,
                filename: css/[name].[contenthash].css,
            }),
            new SvgStorePlugin(),
            new DotenvPlugin(),
        ],
        "resolve": {
            "extensions": [
                ".js",
                ".jsx",
                ".mjs",
                ".scss"
            ]
        },
        "stats": {
            "children": false,
            "colors": true,
            "modules": false,
            "reasons": true
        },
        "target": "node",
        "watch": true,
        "watchOptions": {
            "ignored": /node_modules/
        }
    }
]

我注意到，当我将type: 'javascript/auto'添加到babel-loader配置时，问题就消失了。但为什么？这是解决这个问题的正确方法吗？