How to build a project in Webpack?

Question

webpack

I get an error when I build the project.

ERROR in ./src/js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: .presets must be an array, or undefined

package.json

{
   "name": "mint",
   "version": "1.0.0",
   "description": "",
   "main": "src/js/index.js",
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
     "clear": "del-cli dist"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.7.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.0.6",
     "babel-preset-env": "^1.7.0",
     "copy-webpack-plugin": "^5.0.4",
     "css-loader": "^3.2.0",
     "del-cli": "^3.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "node-sass": "^4.13.0",
     "sass-loader": "^8.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0"
   },
   "dependencies": {
     "@babel/preset-env": "^7.7.1",
     "jquery": "^3.4.1",
     "jquery-match-height": "^0.7.2"
   }
 }

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin= require('copy-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'src/js/index.js'),
    output: {
        filename: "./js/main.js"
    },
    devtool: "source-map",
    module: {
        rules: [{
            exclude: /node_modules/,
            test: /\.js$/,
            include: path.resolve(__dirname, 'src/js/'),
            use: {
                loader: "babel-loader",
                options: {
                    presets: '@babel/preset-env'
                }
            }
        },
            {
                test: /\.(sass|scss)$/,
                include: path.resolve(__dirname, 'src/styles/scss'),
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            minimize: true,
                            url: false
                        }
                    },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: './css/main.bundle.css',
            allChunks: true
        }),
        new CopyWebpackPlugin([{
            from: './src/img',
            to: './img'
        }])
    ]
};

Answer 1

presets: ['@babel/preset-env']