Как настроит webpack 5 для vue 3?

Question

[dark_king_13]

нигде не могу найти инфу, как настроить конфиг на webpack 5. Везде инфа только для 4-й версии. Поставил @vue/compiler-sfc, пишет, поставь vue-template-compiler. Поставил, тоже не работает. Может кто знает, чего не хватает?

package.json

{
  "name": "project-starter",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/UniqueNickname/starter.git",
  "author": "Unique <[e-mail]>",
  "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 на typescript)

Comments

[alex4answ]

дак какой вебпак то ?

Как настроит webpack 5 для vue 3?

как настроить конфиг на webpack 3. Везде инфа только для 4-й версии.

[dark_king_13]

alex4answ, сори, опечатался. меня интересует версия 5.

Answer 1

[dark_king_13]

Нашёл один пример конфига в сети, нужно поставить следующие версии пакетов и всё заработает:
"@vue/compiler-sfc": "3.0.0",
"vue-loader": "16.0.0-beta.8",
"vue": "3.0.0-rc.5"

Comments

[Станислав Евсеенко]

Работает! Спасибо! Три дня искал рабочий вариант)))

Answer 2

[profesor08]

Слишком много зависимостей. Есть шанс, что это дело никогда не заведется, или заведется но не скоро, или работать будет не так как надо. Пятая версия вебпака значительно отличается от предыдущей.

Да и нафига страдать этой фигней со сборкой. Есть https://cli.vuejs.org/ там все за тебя настроили уже.

Comments

[dark_king_13]

в том то и дело, что cli на webpack4, а мне нужен 5 для module federation.

[profesor08]

dark_king_13, ну жди разработчиков зависимостей пока они их подтянут до актуальной версии вебпака или подтягивай сам.