Downloaded 10 times
Uploaded byOdessaFrontend
Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack — это статический модульный бандлер для современных JavaScript-приложений, который создает граф зависимостей и упаковывает модули в один или несколько бандлов. Он поддерживает различные типы модулей и может быть расширен с помощью лоадеров и плагинов для обработки файлов и расширения функционала. В документе также обсуждаются концепции настройки среды разработки и разделения кода.
More Related Content
Similar to Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack для самых маленьких | Odessa Frontend Meetup #5
- 2.
- 3. 3 В З ЯТ О И З Д О К У М Е Н Т А Ц И И Concepts At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.
- 4. 1.1 Сравнение c gruntи gulp
- 5. G R UN T G U L P 1 697 281 — downloads in the last month (npm); 11 713 — stars on github; 2 932 030 — downloads in the last month (npm); 28 596 — stars on github;
- 6. W E BPA C K 9 411 991 — downloads in the last month (npm); 36 463 — stars on github;
- 8.
- 9. 9 Что нам говорит webpack? ● Всечто есть на проекте может быть модулем. Будь то картинка, pug-файл или файл стилей могут подключаться в js-файл. ● За работу с разными типами модулей отвечает файл конфигурации. ● Функционал webpack может расширяться лоадерами и плагинами.
- 11.
- 12. 1 2 Entry pointуказывает webpack`у с какого файла нужно начинать строить зависимости. Точек входа может быть как одна так и несколько. Если несколько, то они указываются в объекте парой «ключ- значение» (где ключ — это имя точки, а значение — путь к файлу)
- 13.
- 14.
- 15.
- 16. 1 6 Output показываеткуда будут выгружаться файлы, как они будут называться и как будут меняться ссылки.
- 17.
- 18.
- 19. 1 9 Какие бывают модули? ● AMD— одна из самых древних систем организации модулей; ● CommonJS — система модулей, встроенная в сервер Node.JS. ● UMD — система модулей, которая предложена в качестве универсальной. ● ES6 Modules — модули принятые стандартом
- 20.
- 21.
- 22.
- 23. 2 3 Лоадеры работают непосредственнос файлами модулей. Они говорят вебпаку как файл будет компилироваться и обрабатываться.
- 24.
- 25.
- 26.
- 27.
- 28. 2 8 Плагины работаютс самим бандлом. Они отвечают за расширения всего функционала. Примеры функционала: ● Удаление и создания новых файлов ● Минификация ● Сборка одного или нескольких файлов
- 29.
- 30.
- 31.
- 32. 3 2 Process 1 23 PluginsLoadersEntry Output 4
- 34.
- 35. 3 5 NODE_ENV Это глобальнаяпеременна которую можно задавать в CLI и использовать в файле конфигурации.
- 36.
- 37. Я хочу услышать трисамых главных слова Webpack Dev Server
- 38.
- 40.
- 41. 4 1 HMR Меняет, добавляети убирает модули в приложении без полной перезагрузки
- 42. 8 Разделение кода на части(chunks)
- 43. 4 3 Code Splitting ● EntryPoints: разделение кода при помощи entry. ● CommonsChunkPlugin: плагин который ищет общие модули в entry points и выносит их в отдельный файл. ● Асинхронные импорты: подключение модулей асинхронно по мере их потребности.
- 44. 4 4 Entry Разделение кодапри помощи entry.
- 45. 4 5 CommonsChunkPlugin Плагин которыйищет общие модули в entry points и выносит их в отдельный файл.
- 46.
- 47.
- 48. require.ensure * Создастся новыйбандл который будет подключаться по востребованости
- 49.
- 50.
- 51. 5 1 Что всебя включает? ● Сбор стилей в один файл ● Минификация ● Pug, SCSS ● ES6 ● Динамическое подключение модулей
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 59.
- 60. 6 0 Parcel Parcel — маленькийи быстрый бандлер, позиционируется как решение для маленьких проектов.
- 62. 6 2 И т.д. ● Webpack4 уже скоро!!! ● Gulp and webpack-stream
- 63. Thank you! Github: https://github.com/rotarNikita/webpack-sample Telegram:@nikitosinar (https://t.me/nikitosinar)