How to configure webpack 5 for vue 3?

Question

webpack

I can’t find info anywhere on how to set up a config for webpack 5. Everywhere info is only for the 4th version. Put @vue/compiler-sfc, writes, put vue-template-compiler. Installed, doesn't work either. Does anyone know what is missing?

package.json

{
  "name": "project-starter",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/UniqueNickname/starter.git",
  "author": "Unique <[email protected]>",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env TS_NODE_PROJECT=\"tsconfig.json\" NODE_ENV=development webpack serve --open --config configs/webpack/webpack.config.ts",
    "build:dev": "cross-env TS_NODE_PROJECT=\"tsconfig.json\" NODE_ENV=development webpack --config configs/webpack/webpack.config.ts",
    "build:prod": "cross-env TS_NODE_PROJECT=\"tsconfig.json\" NODE_ENV=production webpack --config configs/webpack/webpack.config.ts",
    "lint:fix": "eslint --fix --ext .js,.ts,.vue ."
  },
  "browserslist": "> 0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "@types/copy-webpack-plugin": "^6.4.0",
    "@types/mini-css-extract-plugin": "^1.2.2",
    "@types/node": "^14.14.20",
    "@types/webpack": "^4.41.25",
    "@types/webpack-dev-server": "^3.11.1",
    "@typescript-eslint/eslint-plugin": "^4.12.0",
    "@typescript-eslint/parser": "^4.12.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "eslint": "^7.17.0",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-sonarjs": "^0.5.0",
    "eslint-webpack-plugin": "^2.4.1",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.3",
    "prettier": "^2.2.1",
    "prettier-eslint": "^12.0.0",
    "sass": "^1.32.2",
    "sass-loader": "^10.1.0",
    "stylelint": "^13.8.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.3.0",
    "stylelint-order": "^4.1.0",
    "stylelint-scss": "^3.18.0",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3",
    "vue-loader-plugin": "^1.3.0",
    "vue-loader-v16": "^16.0.0-beta.5.4",
    "webpack": "^5.12.2",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@vue/compiler-sfc": "3.0.0-alpha.11",
    "normalize.css": "^8.0.1",
    "vue": "3.0.0-alpha.11",
    "vue-loader": "15.9.5"
  }
}

webpack config to typescript)

Answer 1

I found one example of a config on the net, you need to install the following versions of packages and everything will work:
"@vue/compiler-sfc": "3.0.0",
"vue-loader": "16.0.0-beta.8",
"vue" : "3.0.0-rc.5"