Webpack 5 Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema

huangapple go评论131阅读模式
英文:

Webpack 5 Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema

问题

我正在从头开始开发创意网站的课程,不使用任何框架,遵循教程中的代码,并出现以下错误。教程使用的是 webpack: 4.*.*,而我使用的是最新的稳定版本 webpack: 5.75.*

错误信息:

[webpack-cli] 无效的配置对象Webpack 已经使用与 API 架构不匹配的配置对象进行初始化
 - 配置项 node 应该是以下之一
   false | 对象 { __dirname?, __filename?, global? }
   -> 包括各种 Node 相关的填充或模拟
 详情:
    * 配置项 node 应该为 false
    * 配置项 node 应该是一个对象:
      对象 { __dirname?, __filename?, global? }
      -> 用于 Node 兼容性功能的选项对象

这是我的 webpack.config.js

const path = require('path');
const webpack = require('webpack');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const IS_DEVELOPMENT = process.env.NODE_ENV = 'dev';

const dirApp = path.join(__dirname, 'src');
const dirShared = path.join(__dirname, 'shared');
const dirStyles = path.join(__dirname, 'styles');
const dirNode = 'node_modules';

module.exports = {
    node: false,
    entry: [
        path.join(dirApp, 'index.js'),
        path.join(dirStyles, 'index.scss')
    ],
    
    // https://webpack.js.org/configuration/resolve/
    resolve: {
        modules: [
            dirApp,
            dirShared,
            dirStyles,
            dirNode
        ],
    },
    
    plugins: [
        new webpack.DefinePlugin({
            // 定义...
            IS_DEVELOPMENT
        }),
        
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: './shared',
                    to: ''
                }
            ]
        }),
        
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        
        new ImageMinimizerPlugin({
            minimizer: {
                implementation: ImageMinimizerPlugin.imageminMinify,
                options: {
                    // 自定义选项的无损优化
                    // 请随时尝试不同的选项以获得更好的结果
                    plugins: [
                        ["gifsicle", { interlaced: true }],
                        ["jpegtran", { progressive: true }],
                        ["optipng", { optimizationLevel: 1 }]
                    ],
                },
            },
        }),
        
        new NodePolyfillPlugin(),
    ],
    
    module: {
        rules: [
            {
                // 正则表达式
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                }
            },
            
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: ''
                        }
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                    },
                    {
                        loader: 'sass-loader',
                    }
                ]
            },
            
            {
                test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
                loader: 'file-loader',
                options: {
                    name (file) {
                        return '[contenthash].[ext]';
                    }
                }
            },
            
            {
                test: /\.(jpe?g|png|gif|svg|webp)$/i,
                use: [
                    {
                        loader: ImageMinimizerPlugin.loader,
                        options: {
                            minimizer: {
                                implementation: ImageMinimizerPlugin.imageminMinify,
                                options: {
                                    plugins: [
                                        "imagemin-gifsicle",
                                        "imagemin-mozjpeg",
                                        "imagemin-pngquant",
                                    ],
                                },
                            },
                        },
                    },
                ],
            },
        ]
    }
}

package.json

{
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "webpack --progress --config webpack.config.build.js",
    "development": "webpack serve --progress --config webpack.config.development.js",
    "start": "npm run development"
  },
  "devDependencies": {
    "babel-loader": "^9.1.2",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "image-minimizer-webpack-plugin": "^3.8.1",
    "imagemin": "^8.0.1",
    "mini-css-extract-plugin": "^2.7.2",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "postcss-loader": "^7.0.2",
    "sass": "^1.58.3",
    "sass-loader": "^13.2.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  }
}

我尝试了根据错误信息和文档添加了 node 对象,但不起作用。Webpack Node 文档

node: false | {
__dirname: false,
__filename: false,
global: false
}
英文:

I am doing a course on developing creative website from scratch without using any frameworks and following the instructors code and getting the following error. The instructor is using webpack: 4.*.* and I am on webpack: 5.75.* which is the latest stable version.

error

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node should be false.
    * configuration.node should be an object:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.

here is my webpack.config.js

const path = require('path')
const webpack = require('webpack')

const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const IS_DEVELOPMENT = process.env.NODE_ENV = 'dev'

const dirApp = path.join(__dirname, 'src')
const dirShared = path.join(__dirname, 'shared')
const dirStyles = path.join(__dirname, 'styles')
const dirNode = 'node_modules'

module.exports = {
    node: false,
    entry: [
        path.join(dirApp, 'index.js'),
        path.join(dirStyles, 'index.scss')
    ],

    // https://webpack.js.org/configuration/resolve/
    resolve: {
        modules: [
            dirApp,
            dirShared,
            dirStyles,
            dirNode
        ],
    },

    plugins: [
        new webpack.DefinePlugin({
            // Definitions...
            IS_DEVELOPMENT
        }),

        new CopyWebpackPlugin({
            patterns: [
                {
                    from: './shared',
                    to: ''
                }
            ]
        }),

        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),

        new ImageMinimizerPlugin({
            minimizer: {
                implementation: ImageMinimizerPlugin.imageminMinify,
                options: {
                    // Lossless optimization with custom option
                    // Feel free to experiment with options for better result for you
                    plugins: [
                        ["gifsicle", { interlaced: true }],
                        ["jpegtran", { progressive: true }],
                        ["optipng", { optimizationLevel: 1 }]
                    ],
                },
            },
        }),

        new NodePolyfillPlugin(),
    ],

    module: {
        rules: [
            {
                // regular expression
                test: /\.js$/,
                use: {
                    loader: 'babel-loader'
                }
            },

            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: ''
                        }
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },

            {
                test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
                loader: 'file-loader',
                options: {
                    name (file) {
                        return '[contenthash].[ext]'
                    }
                }
            },

            {
                test: /\.(jpe?g|png|gif|svg|webp)$/i,
                use: [
                    {
                        loader: ImageMinimizerPlugin.loader,
                        options: {
                            minimizer: {
                                implementation: ImageMinimizerPlugin.imageminMinify,
                                options: {
                                    plugins: [
                                        "imagemin-gifsicle",
                                        "imagemin-mozjpeg",
                                        "imagemin-pngquant",
                                    ],
                                },
                            },
                        },
                    },
                ],
            },
        ]
    }
}

package.json

{
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "webpack --progress --config webpack.config.build.js",
    "development": "webpack serve --progress --config webpack.config.development.js",
    "start": "npm run development"
  },
  "devDependencies": {
    "babel-loader": "^9.1.2",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "image-minimizer-webpack-plugin": "^3.8.1",
    "imagemin": "^8.0.1",
    "mini-css-extract-plugin": "^2.7.2",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "postcss-loader": "^7.0.2",
    "sass": "^1.58.3",
    "sass-loader": "^13.2.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  }
}

I did try adding the node object at it mentions in the error and also in the docs but it does not work.
webpack node docs

node: false | {
__dirname: false,
__filename: false,
global: false
}

答案1

得分: 1

My package.json 指向 webpack.config.development.js,在那里我有一个拼写错误,我写成了 node: 'development' 而不是 mode:development,这就是为什么会出现上面的错误。

上面的 webpack.config.js 兼容并适用于 webpack:5.75.0,以下是我的 webpack.config.development.js 以供参考。我希望这对尝试理解 webpack.config.js 的人有所帮助。

const path = require('path')

const { merge } = require('webpack-merge')

const config = require('./webpack.config')

module.exports = merge(config, {
    mode: 'development',

    devtool: 'inline-source-map',

    devServer: {
        devMiddleware: {
            writeToDisk: true
        },
    },

    output: {
        path: path.resolve(__dirname, 'public')
    }
})
英文:

My package.json was pointing to the webpack.config.development.js and in there i had a typo where I had typed node: 'development' instead of mode:development and that is why it was throwing the above error.
The above webpack.config.js is compatible and working with webpack:5.75.0 and below is my webpack.config.development.js for reference. I hope this is helpful to someone trying to figure out webpack.config.js

const path = require('path')

const { merge } = require('webpack-merge')

const config = require('./webpack.config')

module.exports = merge(config, {
    mode: 'development',

    devtool: 'inline-source-map',

    devServer: {
        devMiddleware: {
            writeToDisk: true
        },
    },

    output: {
        path: path.resolve(__dirname, 'public')
    }
})

huangapple
  • 本文由 发表于 2023年3月4日 03:07:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75630980.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定