Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

380 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Webpack для самых маленьких | OdessaFrontend 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)

×