const path = require('path')
const { CleanWebpackPlugin  } = require("clean-webpack-plugin")
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require("webpack")
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
 mode: 'development',
 entry: {
  main:'./src/index.js',
  
 }
  ,
 output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist')
 },

 resolve: {
  extensions: ['.js', '.vue']
 },
 
 module: {
  rules: [
  { test: '/\.css$/i', use: ['style-loader', 'css-loader'] },
  { test: '/\.vue$/', use: 'vue-loader' }
  ]

 },
 plugins: [
  new HTMLWebpackPlugin({ template: './index.html' }),
  new CleanWebpackPlugin(),
  new VueLoaderPlugin()
 ],


 devServer: {
  hot:true,
  open:true,
  port: 4200
 },
}

[webpack-cli] Error: [VueLoaderPlugin Error] No matching rule for .vue files found.
Make sure there is at least one root-level rule that matches .vue or .vue.html files.

{ test: '/\.vue$/', loader: 'vue-loader' }

{
  "name": "checkoutform",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^2.0.0",
    "vue-loader": "^15.9.4",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.3.1",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack"
  },
  "keywords": [],
  "author": "Movsesyan David <coldseattle@mail.ru> (http://github.com/coldSeattle)",
  "license": "MIT"
}