类型错误：webpack.DefinePlugin 不是构造函数

Question

我正在尝试将插件添加到我的 webpack.config.js 文件中，但是当我这样做时，我收到此错误。

    [webpack-cli] Failed to load '/Users/slatifi/git/hcah/webpack.config.js' config
[webpack-cli] TypeError: webpack.DefinePlugin is not a constructor
    at Object.<anonymous> (/Users/slatifi/git/hcah/webpack.config.js:44:8)
    at Module._compile (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (/Users/slatifi/git/hcah/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at loadConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1322:31)
    at WebpackCLI.resolveConfig (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1454:44)
    at WebpackCLI.createCompiler (/Users/slatifi/git/hcah/node_modules/webpack-cli/lib/webpack-cli.js:1839:33)

这是我的 webpack.config.js 文件：

const { webpack } = require("webpack");
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{ loader: "babel-loader" }],
            },
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: [{ loader: "babel-loader" }],
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx", ".css", ".png"],
    },
    plugins: [
       new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
};

我正在尝试添加此环境变量来解决我在 React 应用程序中遇到的另一个问题（尝试使用导致这些问题的 rsuite），请参见下文：

defaultProps.js:34 Uncaught ReferenceError: process is not defined
at eval (defaultProps.js:34)
at eval (StepItem.js:99)
at Module../node_modules/rsuite/es/Steps/StepItem.js (main.js:5094)
at __webpack_require__ (main.js:6051)
at eval (Steps.js:18)
at Module../node_modules/rsuite/es/Steps/Steps.js (main.js:5105)
at __webpack_require__ (main.js:6051)
at eval (index.js:5)
at Module../node_modules/rsuite/es/Steps/index.js (main.js:5116)
at __webpack_require__ (main.js:6051)

任何建议将不胜感激。

Answer 1

我以前也遇到过同样的问题，问题是这行代码：

const { webpack } = require("webpack");

您需要做的就是删除大括号{}，其余代码将正常工作：

const webpack = require("webpack");