F
F
Fedor2021-03-25 15:56:32
npm
Fedor, 2021-03-25 15:56:32

When you run npm run dev, it gives an error, how to understand which plugin is causing the command to not execute?

Greetings! I decided to learn Webpack, read the guide on it. Installed plugins that I will need in the future. But at one point, when executing the command, it freezes for a few seconds and throws an error:

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

I ask for help from competent comrades to deal with this. I am attaching package.json and webpack.config.js below:

{
  "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']
            }
         ]
     }
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
W
WapSter, 2021-03-25
@Mecitan

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

You are told in layman's terms that options must be an object.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question