Обновление проекта Vue до webpack4.x Xiaoji [с кодом]

внешний интерфейс Командная строка Vue.js Webpack

С момента выпуска webpack 4.x он завоевал расположение программистов. Проект моей компании - это проект vue, основанный на версии webpack 3.x, В то время проект был собран с помощью инструмента vue-cli.После разработки проекта было обнаружено, что производительность упаковки низкая, а проект многостраничный. Упакованные файлы разделены, исходный веб-пакетCommonsChunkPluginПлагин трудно удовлетворить потребности, я хочу использоватьSplitChunksPluginЗаменив его, и так начался изнурительный процесс апгрейда.

Теперь я записываю свой процесс обновления следующим образом, надеясь дать некоторую справочную информацию друзьям, которым нужно обновить проект vue.

обновленный код

Шаг первый: используйтеvue-cliИнструмент для создания простого проекта vue webpack

vue init webpack vue-webpack4-v2

Открытьpackage.jsonфайл, проверьте информацию о версии веб-пакета и обнаружите, что веб-пакет по-прежнему имеет версию 3.x.

    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"

Шаг 2: Обновите пакет npm

Так как есть много пакетов, которые нужно обновить, работать по одному затруднительно, поэтому рекомендуется использоватьnpm-checkИнструмент для проверки и обновления версий пакетов.

Поскольку ручные обновления слишком громоздки, вы можете запуститьnpm-check -uКоманда для пакетного обновления пакетов npm

Пакеты, которые необходимо добавить:

  • "webpack-cli": "^3.1.0"
  • "mini-css-extract-plugin": "^0.4.1"

Быть удаленным пакетом (ссылка на пакет Plug-in WebPack Configuration также удалена):

  • "extract-text-webpack-plugin": "^3.0.0"
  • "uglifyjs-webpack-plugin": "^1.1.1"
  • "optimize-css-assets-webpack-plugin": "^5.0.0"

Уведомление:

  • "eslint": номер версии "^5.3.0" не должен быть слишком большим, измените его на "^4.0.0"

Шаг 3: обновление конфигурации веб-пакета

Обратитесь к официальной документации по обновлениюTo v4 from v3

Основные измененияbuild/webpack.xxx.conf.jsдокумент

Шаг 4: обновление конфигурации vue-loader

Обратитесь к официальной документации по обновлениюМиграция с v14

Основные измененияbuild/vue-loader.conf.jsа такжеbuild/webpack.xxx.conf.jsдокумент

Уведомление:

  • Удалитьbuild/webpack.prod.conf.jsсерединаOptimizeCSSPluginплагин

Суммировать

После вышеуказанных четырех шагов вы можете в основном успешно запустить проект, но ваши возможности ограничены, и некоторые принципы конфигурации кажутся понятыми, но не понятыми, но процесс роста должен осмелиться продолжить Потерпите неудачу и попробуйте, чтобы вы могли шаг за шагом перейти от незнакомого к знакомому. Как говорится, «Дорога длинна, и дорога длинна, и я буду ходить вверх и вниз, чтобы найти ее».

Ссылаться на

Категории