При запуске npm run dev выдаёт ошибку как понять, из-за какого плагина не происходит выполнение команды?

Question

[Фёдор]

Приветствую! Решил освоить Webpack, читал гайд по нему. Ставил плагины, которые мне понадобятся в дальнейшем. Но в один момент, при выполнении команды зависает на несколько секунд и сыпит ошибку:

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

Прошу помощи у компетентных товарищей разобраться с этим. Ниже прилагаю package.json и webpack.config.js:

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "Learn Webpack",
  "private": true,
  "scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production",
    "build": "webpack",
    "watch": "webpack --mode development --watch",
    "server": "webpack-dev-server --mode development --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Fiodar",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^8.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.3.9",
    "webpack": "^5.27.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "normalize.css": "^8.0.1"
  }
}

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    mode: 'development',

     entry: {
         main: path.resolve(__dirname, 'src/index.js'),
     },
     output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist') //
     },
     resolve: {
         alias: {
             '@': path.resolve(__dirname, 'src') //короткий путь для импортов
         }
     },
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
    },
     plugins: [
        new HtmlWebpackPlugin( {
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([ // Можно переносить файлы \ папкт и т.п.
            {
                from: path.resolve(__dirname, ''), //путь откуда копируем
                to: path.resolve(__dirname, '')   //путь куда копируем
            }
        ]),
     ],

     module: {
         rules: [
             {
                test: /\.css$/,
                use: ['MiniCssExtractPlugin.loader', 'css-loader'] //читается справа налево
             },
             {
                test: /\.(png|jpg|svg|gif)$/,
                use: ['file-loader']
             },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: ['file-loader']
            }
         ]
     }
}

Comments

[Тигран Абрамян]

копируй ошибку вставь в поисковик и переходи по первой ссылке

[Фёдор]

Тигран Абрамян, так элегантно в гугл меня ещё не посылали. :D

Вообще да. Надо было туда сразу писать, а потом уже сюда.

Answer 1

[WapSter]

new CopyWebpackPlugin([ // Можно переносить файлы \ папкт и т.п.
            {
                from: path.resolve(__dirname, ''), //путь откуда копируем
                to: path.resolve(__dirname, '')   //путь куда копируем
            }
        ]),

Тебе человеческим языком говорят, что опции должны быть объектом.

Comments

[Фёдор]

Ну так написано согласно офф.документации:


Либо я чего-то не понимаю, пока что. Либо не туда смотрю в доке.

[WapSter]

Фёдор, ткну носом new CopyWebpackPlugin([]) - так нельзя, new CopyWebpackPlugin({patterns: []}) - нужно вот так

[Фёдор]

WapSter, хм, я думал, что patterns - это некое абстрактное представление для примера.

[WapSter]

Фёдор, и с чего ты это решил? Будь добр пометь решением

[Фёдор]

WapSter, не стоит вдаваться в дерби моей логики. За ответ спасибо. Мне на будущее будет примером того, что надо делать так, как написано в документации.