Answer the question
In order to leave comments, you need to log in
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
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question