@dark_king_13

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

нигде не могу найти инфу, как настроить конфиг на 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 <dr.art-47@yandex.ru>",
  "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)
  • Вопрос задан
  • 158 просмотров
Решения вопроса 1
@dark_king_13 Автор вопроса
Нашёл один пример конфига в сети, нужно поставить следующие версии пакетов и всё заработает:
"@vue/compiler-sfc": "3.0.0",
"vue-loader": "16.0.0-beta.8",
"vue": "3.0.0-rc.5"
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08
Слишком много зависимостей. Есть шанс, что это дело никогда не заведется, или заведется но не скоро, или работать будет не так как надо. Пятая версия вебпака значительно отличается от предыдущей.

Да и нафига страдать этой фигней со сборкой. Есть https://cli.vuejs.org/ там все за тебя настроили уже.
Ответ написан
Vadiok
@Vadiok
Веб разработчик
Попробуйте обновить ваш Vue Cli до next версии (в данный момент это v5.0.0-alpha.2) и создайте новый проект:
npm i -g @vue/cli@next
vue create new-project-name


Альфа версия уже поддерживает Webpack 5, хотя и возможно словить какие-то баги.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
24 янв. 2021, в 12:50
5000 руб./за проект
24 янв. 2021, в 12:45
300 руб./за проект
24 янв. 2021, в 12:39
20000 руб./за проект