Начало работы с Webpack 4 и Vuejs – урок по быстрому старту

Начало работы с Webpack 4 и Vuejs – урок по быстрому старту

От автора: Webpack 4 официально вышел! А вы знали, что его называют Legato? В новой версии множество новых функций и улучшений. Игра Sean T. Larkin поднялась на 3 уровня в Webpack 4. Если коротко, Webpack4 на 98% быстрее. В нем есть Mode, #0CJS и ощутимые настройки по умолчанию. Теперь деление на части – это настраиваемое значение по умолчанию для разных режимов. Вместе с поддержкой .mjs и WebAssembly были представлены типы модулей. JS будущего уже здесь!

Я очень легко мигрировал один базовый VueJs стартер на Webpack4. Пришлось немного подумать, так как некоторые плагины до сих пор не обновлены до Webpack4. Однако когда поддержка появится, перенести существующие проекты на последнюю версию можно будет за несколько минут. Я начал с #0CJS (Zero-Config JS), в котором используются стандартные режимы. Однако после интеграции Vue я добавил пару базовых настроек для стартер-проекта, среди которых роутинг, тестирование и настраиваемый HTML файл.

Перейдем к коду: я использовал 0-Configuration режимы для production/development билдов и webpack-dev-server для разработки. В конец статьи я добавил все статьи по Webpack4, которые смог найти, чтобы облегчить вам процесс миграции. Подзаголовки указывают на код в репозитории Git. Можете посмотреть его прямо там, кликнув по заголовку.

1. Package.json:

Первичный package.json – простой. Скрипт для разработки, сборки и еще один для webpack-dev-server. Также есть скрипты для тестирования.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

2. webpack.config.js файл:

После настройки package.json необходимо перейти к настройке файла webpack.config.js. Я настроил базовый файл, но его можно разделить или улучшить в будущем. Кода ниже должно быть достаточно для начала.

2.1. Настройка HtmlWebpackPlugin:

Если просто, то я использовал HtmlWebpackPlugin для получения шаблона .ejs и наполнил его сгенерированным js/css. HtmlWebpackPlugin официально не работает, но я подключил патч от Webpack.

2.2. Извлечение CSS с помощью ExtractTextPlugin:

Далее мы с помощью ExtractTextPlugin извлечем CSS , чтобы упростить разбиение CSS. Прямо сейчас этот плагин не работает. (*Правка: они выпустили бета версию плагина, о которой я не знал. Sean T. Larkin сказал мне об этом, и я обновил код, чтобы он заработал.*)

2.3. Настройка режимов:

Режим конфига Webpack можно указать явно в объекте конфига.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

2.4. Настройка конфигураций оптимизации:

Также можно настроить объект «optimization». Плагины типа ‘NoEmitOnErrorsPlugin’, ‘ModuleConcatenationPlugin’, ‘NamedModulesPlugin’ переехали на конфиг оптимизации и имеют значения по умолчанию на основе выбранного режима. ‘CommonsChunkPlugin’ был удален, теперь его конфиг находится внутри объекта optimization. Его можно настроить следующим образом:

Чем хороша эта миграция – я понял свои ошибки, просто прочитав их в консоли. Во время настройки конфига выше я допустил много ошибок, а благодаря информативным ошибкам, я смог все правильно настроить.

2.5. Настройка devServer для webpack-dev-server:

Перейдем к настройке devServer. Я заметил, что если установить noInfo: true, то я не получу никакой информации о том, на каком порту запущен сервер, в отличие от предыдущих версий. Для каких-либо заключений нужно еще покопаться. Сейчас значение false.

2.6. Настройка модулей

Ничего необычного, старый Vue, JS, CSS, SCSS, SVG и загрузчики изображений.

Как видите, я закомментировал функции extractCSS. Они не работают. Scoped CSS в Vue – это победа! (*Правка: сейчас работает. См. выше.*)

Вот и все. Это базовая конфигурация/миграция на Webpack4, которую мне понадобилось провести для запуска простого проекта VueJs с нуля. Я добавил базовые тесты, роутинг, следуя структуре страницы, макета и компонентов.

Заметка: в коде выше я удалил пару строк для простоты объяснения. В репозитории Git лежит весь необходимый код для тех, кто хочет начать работу в VueJs и Webpack4. Я готов учиться и отвечать на любые возникшие вопросы.

Автор: neha nupoor

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree