CODEWITHSUNDEEP
webpack
mai mohamed
mai mohamed

Reputation: 139

webpack gives me error "Invalid configuration object. 'plugins'."

project link

my webpack considers "plugins" as invalid object I don't get why

here is the error in the screenshot:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'plugins'. enter image description here

and here is my webpack.prod.js config file 

const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')
module.exports = {
    entry: "./src/js/index.js",
    mode: 'production',
    output: {
        libraryTarget: 'var',
        library: 'Client'
    },
    module: {
        rules: [
            {
                test: '/\.js$/',
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test:  /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000',
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                      name: '[name].[ext]',
                      outputPath: 'fonts/'
                    }
            }    
        ]
    }
],     
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html",
        }),
        new MiniCssExtractPlugin({filename: '[name].css'}),
        new WorkboxPlugin.GenerateSW()


    ]
    }
}

Upvotes: 1

Views: 1241

Answers (1)

tschaub
tschaub

Reputation: 36

The configuration file has an error: the 'plugins' object should not be a child of 'module' but needd to be one hierachy level higher. (see webpack docs: https://webpack.js.org/configuration/)

Try:

const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')
module.exports = {
    entry: "./src/js/index.js",
    mode: 'production',
    output: {
        libraryTarget: 'var',
        library: 'Client'
    },
    module: {
        rules: [
            {
                test: '/\.js$/',
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test:  /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000',
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                      name: '[name].[ext]',
                      outputPath: 'fonts/'
                    }
                }]
             }
        ],  
    },   
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html",
        }),
        new MiniCssExtractPlugin({filename: '[name].css'}),
        new WorkboxPlugin.GenerateSW()
    ]
}

Upvotes: 2

Related Questions