Webpack.config not working?

Hello! On the Internet, I found a file with webpack.config and package.json. After installing node_modules, I ran npm run dev command, which gave me the following error:

CopyPlugin Invalid Options

options should be array

ValidationError: CopyPlugin Invalid Options
at validateOptions (C: \ Users \ Admin \ Desktop \ webpack-2020-master \ node_modules \ schema-utils \ src \ validateOptions.js: 32: 11)
at new CopyPlugin (C: \ Users \ Admin \ Desktop \ webpack-2020-master \ node_modules \ copy-webpack-plugin \ dist \ index.js: 26:30)
at plugins (C: \ Users \ Admin \ Desktop \ webpack-2020-master \ webpack.config.js: 91: 5)
at Object. (C: \ Users \ Admin \ Desktop \ webpack-2020-master \ webpack.config.js: 135: 12)
at Module._compile (C: \ Users \ Admin \ Desktop \ webpack-2020-master \ node_modules \ v8-compile-cache \ v8-compile-cache.js: 192: 30)
at Object.Module._extensions..js (internal / modules / cjs / loader.js: 991: 10)
at Module.load (internal / modules / cjs / loader.js: 811: 32)
at Function.Module._load (internal / modules / cjs / loader.js: 723: 14)
at Module.require (internal / modules / cjs / loader.js: 848: 19)
at require (C: \ Users \ Admin \ Desktop \ webpack-2020-master \ node_modules \ v8-compile-cache \ v8-compile-cache.js: 161: 20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `cross-env NODE_ENV = development webpack --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C: \ Users \ Admin \ AppData \ Roaming \ npm-cache \ _logs \ 2020-10-19T06_56_36_666Z-debug.log

Please help me figure out what's wrong.

package.json file

{
  "name": "webpack-course-2020",
  "version": "1.0.0",
  "description": "webpack course",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --mode development",
    "build": "cross-env NODE_ENV=production webpack --mode production",
    "watch": "cross-env NODE_ENV=development webpack --mode development --watch",
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open",
    "stats": "webpack --json > stats.json && webpack-bundle-analyzer stats.json"
  },
  "browserslist": "> 0.25%, not dead",
  "keywords": [
    "js",
    "javascript",
    "webpack"
  ],
  "author": "Vladilen <[email protected]>",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^6.0.3",
    "css-loader": "^3.4.2",
    "csv-loader": "^3.0.2",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "papaparse": "^5.1.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.2",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "^4.41.5",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.8.3",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "normalize.css": "^8.0.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

Webpack.config file

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev

const optimization = () => {
  const config = {
    splitChunks: {
      chunks: 'all'
    }
  }

  if (isProd) {
    config.minimizer = [
      new OptimizeCssAssetWebpackPlugin(),
      new TerserWebpackPlugin()
    ]
  }

  return config
}

const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`

const cssLoaders = extra => {
  const loaders = [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: isDev,
        reloadAll: true
      },
    },
    'css-loader'
  ]

  if (extra) {
    loaders.push(extra)
  }

  return loaders
}

const babelOptions = preset => {
  const opts = {
    presets: [
      '@babel/preset-env'
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties'
    ]
  }

  if (preset) {
    opts.presets.push(preset)
  }

  return opts
}


const jsLoaders = () => {
  const loaders = [{
    loader: 'babel-loader',
    options: babelOptions()
  }]

  if (isDev) {
    loaders.push('eslint-loader')
  }

  return loaders
}

const plugins = () => {
  const base = [
    new HTMLWebpackPlugin({
      template: './index.html',
      minify: {
        collapseWhitespace: isProd
      }
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/favicon.ico'),
          to: path.resolve(__dirname, 'dist')
        }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: filename('css')
    })
  ]

  if (isProd) {
    base.push(new BundleAnalyzerPlugin())
  }

  return base
}

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: {
    main: ['@babel/polyfill', './index.jsx'],
    analytics: './analytics.ts'
  },
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.json', '.png'],
    alias: {
      '@models': path.resolve(__dirname, 'src/models'),
      '@': path.resolve(__dirname, 'src'),
    }
  },
  optimization: optimization(),
  devServer: {
    port: 4200,
    hot: isDev
  },
  devtool: isDev ? 'source-map' : '',
  plugins: plugins(),
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssLoaders()
      },
      {
        test: /\.less$/,
        use: cssLoaders('less-loader')
      },
      {
        test: /\.s[ac]ss$/,
        use: cssLoaders('sass-loader')
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(ttf|woff|woff2|eot)$/,
        use: ['file-loader']
      },
      {
        test: /\.xml$/,
        use: ['xml-loader']
      },
      {
        test: /\.csv$/,
        use: ['csv-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: jsLoaders()
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: {
          loader: 'babel-loader',
          options: babelOptions('@babel/preset-typescript')
        }
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: {
          loader: 'babel-loader',
          options: babelOptions('@babel/preset-react')
        }
      }
    ]
  }
}

JavaScript Anonymous, Aug 3, 2020

1 Answers

CopyPlugin Invalid Options

It says that the options parameter is set incorrectly.

options should be array

And here below it is written for you that the options should be passed as an array with objects, and not as separated objects. Therefore, you need to make an array of objects.

And here is a solution for the gifted -

https://github.com/webpack-contrib/copy-webpack-pl ...

Error Code =

const CopyPlugin = require('copy-webpack-plugin');



module.exports = {

  plugins: [

    new CopyPlugin({

      patterns: [

        { from: 'source', to: 'dest' },

        { from: 'other', to: 'public' },

      ],

    }),

  ],

};

Good Code Example -

const CopyPlugin = require('copy-webpack-plugin');



module.exports = {

  plugins: [

        new CopyPlugin(

            [

                { from: 'source', to: 'dest' },

                { from: 'other', to: 'public' },

            ]

        ),

  ],

};

Anonymous

Your Answer

To place the code, please use CodePen or similar tool. Thanks you!