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.
v
1
Что такое webpack?
3
В З Я Т О И З
Д О К У М Е Н Т А Ц И И
Concepts
At its core, webpack is a static module bundler for modern JavaScript
app...
1.1
Сравнение c grunt и
gulp
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 la...
W E B PA C K
9 411 991 — downloads in the last
month (npm);
36 463 — stars on github;
1.2
Принцип работы
9
Что нам говорит
webpack?
●
Все что есть на проекте может быть модулем. Будь то
картинка, pug-файл или файл стилей могут ...
2
Entry
1 2
Entry point указывает webpack`у с какого
файла нужно начинать строить
зависимости.
Точек входа может быть как одна так...
Одна точка входа
Несколько точек
входа
3
Output
1 6
Output показывает куда
будут выгружаться
файлы, как они будут
называться и как будут
меняться ссылки.
Пример
4
Модули
1 9
Какие бывают
модули?
●
AMD — одна из самых древних систем организации
модулей;
●
CommonJS — система модулей, встроенна...
CommonJS
ES6
5
Loaders
2 3
Лоадеры работают
непосредственно с файлами
модулей. Они говорят вебпаку
как файл будет
компилироваться и
обрабатыватьс...
css-loader + style-loader
file-loader
2 6
ОСНОВНЫЕ ЛОАДЕРЫ:
●
babel-loader
●
html-loader
●
pug-html-loader
●
css-loader
●
less-loader
●
sass-loader
●
file-loade...
6
Plugins
2 8
Плагины работают с самим бандлом.
Они отвечают за расширения всего
функционала.
Примеры функционала:
●
Удаление и созд...
ExtractTextWebpackPlugin
3 0
ОСНОВНЫЕ ПЛАГИНЫ:
●
CommonsChunkPlugin(?)
●
DefinePlugin
●
ExtractTextWebpackPlugin
●
HotModuleReplacementPlugin
●
Pro...
Итого:
Entry
Output
Loaders
Plugins
3 2
Process
1 2 3
PluginsLoadersEntry Output
4
7
Настройка среды
разработки
3 5
NODE_ENV
Это глобальная переменна которую
можно задавать в CLI и использовать в
файле конфигурации.
Пример
Я хочу услышать
три самых главных
слова
Webpack
Dev
Server
7.1
webpack-dev-server
7.2
Hot Module
Replacement
4 1
HMR
Меняет, добавляет и убирает
модули в приложении без полной
перезагрузки
8
Разделение кода
на части (chunks)
4 3
Code Splitting
●
Entry Points: разделение кода при помощи entry.
●
CommonsChunkPlugin: плагин который ищет общие
модул...
4 4
Entry
Разделение кода при
помощи entry.
4 5
CommonsChunkPlugin
Плагин который ищет общие
модули в entry points и выносит их в
отдельный файл.
CommonsChunkPlugin
module1.js
module2.js
module3.js
module4.js
entry1.js
entry2.js
entry1.js
module1.js
entry2.js
module3....
4 7
Асинхронные
импорты
Require.ensure &
import();
require.ensure
* Создастся новый бандл который будет подключаться по востребованости
import()
9
Пример полной
конфигурации для MPA
5 1
Что в себя включает?
●
Сбор стилей в один файл
●
Минификация
●
Pug, SCSS
●
ES6
●
Динамическое подключение
модулей
Подключение плагинов и
env
Entry and output
Devtools
5 5
Loaders
●
babel-loader
●
file-loader
●
url-loader
●
extract-loader
●
html-loader
●
pug-html-loader
●
css-loader
●
reso...
Plugins
pug-and-style.js
9
Что дальше?
6 0
Parcel
Parcel —
маленький и
быстрый бандлер,
позиционируется
как решение для
маленьких
проектов.
6 2
И т.д.
●
Webpack 4 уже скоро!!!
●
Gulp and webpack-stream
Thank you!
Github: https://github.com/rotarNikita/webpack-sample
Telegram: @nikitosinar (https://t.me/nikitosinar)
Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack для самых маленьких | Odessa Frontend Meetup #5
Webpack для самых маленьких | Odessa Frontend Meetup #5
Upcoming SlideShare
Loading in …5
×

of

Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 1 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 2 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 3 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 4 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 5 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 6 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 7 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 8 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 9 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 10 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 11 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 12 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 13 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 14 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 15 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 16 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 17 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 18 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 19 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 20 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 21 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 22 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 23 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 24 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 25 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 26 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 27 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 28 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 29 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 30 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 31 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 32 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 33 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 34 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 35 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 36 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 37 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 38 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 39 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 40 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 41 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 42 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 43 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 44 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 45 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 46 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 47 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 48 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 49 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 50 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 51 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 52 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 53 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 54 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 55 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 56 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 57 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 58 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 59 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 60 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 61 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 62 Webpack для самых маленьких | Odessa Frontend Meetup #5 Slide 63
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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)

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

Views

Total views

918

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

10

Shares

0

Comments

0

Likes

0

×