webpack 4 требуется не определено - PullRequest
0 голосов
/ 02 ноября 2018

Я работаю над двумя проектами внутри монорепо. Оба проекта имеют одинаковые зависимости, и каждый имеет webpack.config.js. Конфигурация для обоих точно такая же. Однако в одном из проектов веб-пакет добавляет 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, проблема исчезла. Но почему? И это правильный способ решения этой проблемы?

...