Successfully reported this slideshow.
Your SlideShare is downloading. ×

Webpack для самых маленьких | Odessa Frontend Meetup #5

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Introduction into NuGet
Introduction into NuGet
Loading in …3
×

Check these out next

1 of 63 Ad

Webpack для самых маленьких | Odessa Frontend Meetup #5

Download to read offline

Webpack — один из самых мощных и гибких инструментов для сборки frontend, в основном предназначенный для SPA. Популярность его не имеет границ. Но что делать если вы не занимаетесь разработками SPA? Неужели он только для избранных? И чем же он лучше других сборщиков? На эти и другие вопросы Никита Ротарь отвечает в своем докладе.

Webpack — один из самых мощных и гибких инструментов для сборки frontend, в основном предназначенный для SPA. Популярность его не имеет границ. Но что делать если вы не занимаетесь разработками SPA? Неужели он только для избранных? И чем же он лучше других сборщиков? На эти и другие вопросы Никита Ротарь отвечает в своем докладе.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Webpack для самых маленьких | Odessa Frontend Meetup #5 (20)

Advertisement

More from OdessaFrontend (20)

Recently uploaded (18)

Advertisement

Webpack для самых маленьких | Odessa Frontend Meetup #5

  1. 1. v 1 Что такое webpack?
  2. 2. 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.
  3. 3. 1.1 Сравнение c grunt и gulp
  4. 4. G R U N 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;
  5. 5. W E B PA C K 9 411 991 — downloads in the last month (npm); 36 463 — stars on github;
  6. 6. 1.2 Принцип работы
  7. 7. 9 Что нам говорит webpack? ● Все что есть на проекте может быть модулем. Будь то картинка, pug-файл или файл стилей могут подключаться в js-файл. ● За работу с разными типами модулей отвечает файл конфигурации. ● Функционал webpack может расширяться лоадерами и плагинами.
  8. 8. 2 Entry
  9. 9. 1 2 Entry point указывает webpack`у с какого файла нужно начинать строить зависимости. Точек входа может быть как одна так и несколько. Если несколько, то они указываются в объекте парой «ключ- значение» (где ключ — это имя точки, а значение — путь к файлу)
  10. 10. Одна точка входа
  11. 11. Несколько точек входа
  12. 12. 3 Output
  13. 13. 1 6 Output показывает куда будут выгружаться файлы, как они будут называться и как будут меняться ссылки.
  14. 14. Пример
  15. 15. 4 Модули
  16. 16. 1 9 Какие бывают модули? ● AMD — одна из самых древних систем организации модулей; ● CommonJS — система модулей, встроенная в сервер Node.JS. ● UMD — система модулей, которая предложена в качестве универсальной. ● ES6 Modules — модули принятые стандартом
  17. 17. CommonJS
  18. 18. ES6
  19. 19. 5 Loaders
  20. 20. 2 3 Лоадеры работают непосредственно с файлами модулей. Они говорят вебпаку как файл будет компилироваться и обрабатываться.
  21. 21. css-loader + style-loader
  22. 22. file-loader
  23. 23. 2 6 ОСНОВНЫЕ ЛОАДЕРЫ: ● babel-loader ● html-loader ● pug-html-loader ● css-loader ● less-loader ● sass-loader ● file-loader ● url-loader ● extract-loader
  24. 24. 6 Plugins
  25. 25. 2 8 Плагины работают с самим бандлом. Они отвечают за расширения всего функционала. Примеры функционала: ● Удаление и создания новых файлов ● Минификация ● Сборка одного или нескольких файлов
  26. 26. ExtractTextWebpackPlugin
  27. 27. 3 0 ОСНОВНЫЕ ПЛАГИНЫ: ● CommonsChunkPlugin(?) ● DefinePlugin ● ExtractTextWebpackPlugin ● HotModuleReplacementPlugin ● ProvidePlugin ● UglifyjsWebpackPlugin
  28. 28. Итого: Entry Output Loaders Plugins
  29. 29. 3 2 Process 1 2 3 PluginsLoadersEntry Output 4
  30. 30. 7 Настройка среды разработки
  31. 31. 3 5 NODE_ENV Это глобальная переменна которую можно задавать в CLI и использовать в файле конфигурации.
  32. 32. Пример
  33. 33. Я хочу услышать три самых главных слова Webpack Dev Server
  34. 34. 7.1 webpack-dev-server
  35. 35. 7.2 Hot Module Replacement
  36. 36. 4 1 HMR Меняет, добавляет и убирает модули в приложении без полной перезагрузки
  37. 37. 8 Разделение кода на части (chunks)
  38. 38. 4 3 Code Splitting ● Entry Points: разделение кода при помощи entry. ● CommonsChunkPlugin: плагин который ищет общие модули в entry points и выносит их в отдельный файл. ● Асинхронные импорты: подключение модулей асинхронно по мере их потребности.
  39. 39. 4 4 Entry Разделение кода при помощи entry.
  40. 40. 4 5 CommonsChunkPlugin Плагин который ищет общие модули в entry points и выносит их в отдельный файл.
  41. 41. CommonsChunkPlugin module1.js module2.js module3.js module4.js entry1.js entry2.js entry1.js module1.js entry2.js module3.js module4.js common.js module2.js
  42. 42. 4 7 Асинхронные импорты Require.ensure & import();
  43. 43. require.ensure * Создастся новый бандл который будет подключаться по востребованости
  44. 44. import()
  45. 45. 9 Пример полной конфигурации для MPA
  46. 46. 5 1 Что в себя включает? ● Сбор стилей в один файл ● Минификация ● Pug, SCSS ● ES6 ● Динамическое подключение модулей
  47. 47. Подключение плагинов и env
  48. 48. Entry and output
  49. 49. Devtools
  50. 50. 5 5 Loaders ● babel-loader ● file-loader ● url-loader ● extract-loader ● html-loader ● pug-html-loader ● css-loader ● resolve-url-loader ● postcss-loader ● sass-loader
  51. 51. Plugins
  52. 52. pug-and-style.js
  53. 53. 9 Что дальше?
  54. 54. 6 0 Parcel Parcel — маленький и быстрый бандлер, позиционируется как решение для маленьких проектов.
  55. 55. 6 2 И т.д. ● Webpack 4 уже скоро!!! ● Gulp and webpack-stream
  56. 56. Thank you! Github: https://github.com/rotarNikita/webpack-sample Telegram: @nikitosinar (https://t.me/nikitosinar)

×