Как Webpack сделал меня счастливее

1. сделал меня счастливей WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 YAROSLAV SERHIEIEV, WIX.COM

2. КАК Я НАЧИНАЛ СВОИ ХОББИ-ПРОЕКТЫ

3. НА ПОЛПУТИ К ЦЕЛИ НАЧИНАЛСЯ НУРЕ

4. а новых технологий-то хочется…

7. REQUIRE.JS SystemJS namespaces? а новых технологий-то хочется…

8. .JSX REQUIRE.JS SystemJS namespaces? а новых технологий-то хочется…

9. source maps live reload .JSX tests REQUIRE.JS SystemJS namespaces? ??? minify lazy load а новых технологий-то хочется…

10. СЛОЖНО УВЯЗАТЬ МЕЖДУ СОБОЙ .CSS source maps RUNNER .JS MODULES live reload .JSX tests REQUIRE.JS namespaces? MISC ??? minify R.JS

11. МОЙ ЭНТУЗИАЗМ ПОСЛЕ НАСТРОЙКИ БИЛДА

12. ЧТО ИЗМЕНИЛ ДЛЯ МЕНЯ WEBPACK?

13. ▸ index.html ▸ index.debug.html ▸ bundle.css ▸ bundle.min.css ▸ bundle.js ▸ bundle.min.js ▸ img/logo.png ▸ fonts/… РЕЗУЛЬТАТ СБОРКИ (DIST) ПРОСТОГО SINGLE PAGE APPLICATION KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

14. СОБИРАЕМ ПО ОЛД-СКУЛУ KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

15. СОБИРАЕМ ПО ОЛД-СКУЛУ ▸ rm -rf dist; mkdir dist ▸ cat src/common.js src/page1.js src/page2.js > dist/bundle.js ▸ uglify dist/bundle.js > dist/bundle.min.js ▸ cat src/common.css src/page1.css src/page2.css > dist/ bundle.css ▸ cssmin dist/bundle.css > dist/bundle.min.css ▸ cp src/img dist/img ▸ cp src/font dist/font KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

16. ТЕ ЖЕ КОМАНДЫ, ТОЛЬКО В ПРОФИЛЬ :}> ЧЕРЕЗ GRUNTFILE.JS KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */n' }, dist: { files: { 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] } } }, qunit: { files: ['test/**/*.html'] }, jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { // options here to override JSHint defaults globals: { jQuery: true, console: true, module: true, document: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint', 'qunit'] } }); }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('test', ['jshint', 'qunit']); grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); };

17. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

19. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ▸ js ▸ css ▸ png ▸ woff ▸ txt ▸ xml ▸ hbs ▸ jsx ▸ ES6 ▸ jpg ▸ ROBOTS.TXT ▸ html ▸ coffee ▸ typescript ▸ whatever ВСЕ ОНИ — FIRST CLASS CITIZENS

20. HomePage.jsx KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6

21. HomePage.jsx KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6 [babel-loader] => .js, .map

22. HomePage.jsx KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6 HTMLindex.html HTMLcontacts.html [babel-loader] => .js, .map

23. HomePage.jsx KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ContactsPage.jsx ES6 HTMLindex.html HTMLcontacts.html [babel-loader] => .js, .map StaticSiteGeneratorPlugin

24. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 ES6 HTMLindex.html HTMLcontacts.html HomePage.jsx ContactsPage.jsx

25. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 JSX JSX JSX JSX JSX A.jsx B.jsx C.jsx D.jsx E.jsx ES6 HTMLindex.html HTMLcontacts.html HomePage.jsx ContactsPage.jsx

28. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 JSX JSX JSX JSX JSX A.jsx B.jsx C.jsx D.jsx E.jsx ES6 CommonsChunkPlugin HTMLindex.html HTMLcontacts.html HomePage.jsx ContactsPage.jsx

29. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 JSX JSX JSX JSX JSX A.jsx B.jsx C.jsx D.jsx E.jsx ES6 page1.less page2.css CommonsChunkPlugin HTMLindex.html HTMLcontacts.html HomePage.jsx ContactsPage.jsx

30. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ES6 JSX JSX JSX JSX JSX A.jsx B.jsx C.jsx D.jsx E.jsx ES6 page1.less page2.css CommonsChunkPluginAggressiveMergingPlugin HTMLindex.html HTMLcontacts.html HomePage.jsx ContactsPage.jsx

31. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ page2.css site.css placeholder.png Roboto.ttf Roboto.woff page1.less

34. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ page2.css site.css placeholder.png Roboto.ttf Roboto.woff page1.less unused.png

35. КАК ВЫГЛЯДИТ ПРОСТЕЙШАЯ КОНФИГУРАЦИЯ В ИТОГЕ KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ module.exports = { context: path.resolve(__dirname, 'src'), entry: "./app.js", output: { path: './dist', filename: '[name].js' } };

36. module: { loaders: [{ test: /.js$/, loader: ‘babel-loader', include: path.resolve(__dirname, 'src'), }], }, }; ES6 ЗАГРУЗЧИК KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

37. plugins: [ new HtmlWebpackPlugin({ template: path.join(src, 'index.html'), inject: 'body', }) ] }; HTML-ПЛАГИН KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

38. КАК REQUIRE’ИТЬ В WEBPACK? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ Notation Sync (per ﬁle) Async (per ﬁle) Sync (mask) Async (mask) CJS require(module) require.ensure require(expr)  require.context N/A AMD define([modules]) require([modules]) N/A N/A ES6/S.JS import System.import  (module) N/A System.import  (expr) нестандартные функции Webpack доступно в 2.0.0-beta

39. ОПТОВЫЙ REQUIRE KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ System.import(‘./locales/‘ + lang).then(locale => /* … */);

40. ОПТОВЫЙ REQUIRE KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ System.import(‘./locales/‘ + lang).then(locale => /* … */); ▸ 0.0.js ▸ 1.0.js ▸ 2.0.js…

41. ОПТОВЫЙ REQUIRE KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var locale = require(‘./locales/‘ + lang); var locale = require.context(‘./locales’, true, /.js$/); System.import(‘./locales/‘ + lang).then(locale => /* … */); ▸ 0.0.js ▸ 1.0.js ▸ 2.0.js…

42. ОПТОВЫЙ REQUIRE KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var locale = require(‘./locales/‘ + lang); var locale = require.context(‘./locales’, true, /.js$/); System.import(‘./locales/‘ + lang).then(locale => /* … */); ▸ 0.0.js ▸ 1.0.js ▸ 2.0.js… ▸ main.bundle.js <- [all locales]

43. ОПТОВЫЙ REQUIRE KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var locale = require(‘./locales/‘ + lang); var locale = require.context(‘./locales’, true, /.js$/); System.import(‘./locales/‘ + lang).then(locale => /* … */); ▸ 0.0.js ▸ 1.0.js ▸ 2.0.js… ▸ main.bundle.js <- [all locales] ContextReplacementPlugin

44. ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG

45. ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG JS JS JS loaders

46. dependency analysis ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG JS JS JS loaders

47. dependency analysis ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG JS JS JS loaders JAVASCRIPT - ЭТО ВАМ НЕ ЭТО (C)

48. dependency analysis ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG JS JS JS loaders

49. dependency analysis ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG JS JS JS loaders BUILD PIPELINE

50. dependency analysis ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG JS JS JS loaders BUILD PIPELINEplugins

51. dependency analysis ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ JS CSS PNG JS JS JS loaders HTML JS PNG CSSBUILD PIPELINEplugins

52. КАК БИНАРНИКИ ПРЕВРАЩАЮТСЯ В JAVASCRIPT-МОДУЛИ ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var placeholderImage = require('assets/images/placeholder.png'); module.exports = { createSafeImage: function (src) { var img = document.createElement('img'); img.src = src || placeholderImage; return img; } };

53. BASE64 URL OR…? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."

54. BASE64 URL OR…? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..." "assets/images/placeholder.png" "assets/placeholder.png?787efa438c612b89f46a812" "assets/787efa438c612b89f46a812.png"

55. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

56. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ test: /.png$/

57. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ URL-LOADER * limit = 8000 * name = [path][hash].[ext] test: /.png$/

58. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var placeholderImage = require('assets/images/placeholder.png');URL-LOADER * limit = 8000 * name = [path][hash].[ext] test: /.png$/

59. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var placeholderImage = require('assets/images/placeholder.png'); module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEU URL-LOADER * limit = 8000 * name = [path][hash].[ext] test: /.png$/

60. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var placeholderImage = require('assets/images/placeholder.png'); module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEU URL-LOADER * limit = 8000 * name = [path][hash].[ext] FILE-LOADER * name =  [path][hash].[ext] test: /.png$/

61. … И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var placeholderImage = require('assets/images/placeholder.png'); module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEU module.exports = "assets/images/787efa438c612b89f46a812.png"; URL-LOADER * limit = 8000 * name = [path][hash].[ext] FILE-LOADER * name =  [path][hash].[ext] test: /.png$/

62. КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ 0 1 1 SCSS CSS SOURCE MAP 2 2CSS  AUTOPREFIXED SOURCE MAP 3JS 3 SOURCE MAP SASS-LOADER AUTOPREFIXER-LOADER CSS-LOADER STYLE-LOADER

63. КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ 0 1 1 SCSS CSS SOURCE MAP 2 2CSS  AUTOPREFIXED SOURCE MAP 3JS 3 SOURCE MAP SASS-LOADER AUTOPREFIXER-LOADER CSS-LOADER STYLE-LOADER ExtractTextPlugin

64. ПИШЕМ ASCII ART LOADER KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

65. ПОДКЛЮЧЕНИЕ ASCII KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ pre.innerHTML = require(‘asciiart?color=1!./cute- little-cat.png');

66. ПОДКЛЮЧЕНИЕ ASCII KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ module: { loaders: [ { test: /ASCII_REGEX/, loader: ‘asciiart-loader?color=1’ } ] pre.innerHTML = require(‘asciiart?color=1!./cute- little-cat.png');

67. ПОДКЛЮЧЕНИЕ ASCII KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ module: { loaders: [ { test: /ASCII_REGEX/, loader: ‘asciiart-loader?color=1’ } ] pre.innerHTML = require(‘asciiart?color=1!./cute- little-cat.png'); require('images/ascii/cute-little-cat.png');

68. В ИТОГЕ ОН НАМ ВЕРНЕТ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

69. В ИТОГЕ ОН НАМ ВЕРНЕТ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ module.exports =  "<b class="ansi-0">;</b>  <b class="ansi-1">@</b>...";

70. КОМУ ТАКОЕ НАДО? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

75. И ВСЕ-ТАКИ ПОЛУЧИЛОСЬ МИЛО KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

76. HOT MODULE REPLACEMENT [ WITHOUT REACT.JS + REDUX]

77. ДЛЯ ЭТОГО ПОНАДОБИТСЯ WEBPACK-DEV-SERVER KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

78. KIT CAT CLOCK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

79. KIT CAT CLOCK KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

80. TEXT

81. ЧУДА НЕТ. РАСХОДИМСЯ :) KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ function injectRootElement() { var input = document.createElement('input'); input.placeholder = "App Started"; // -> File Changed document.body.appendChild(input); return input; } var input = injectRootElement();

82. ЧУДА НЕТ. РАСХОДИМСЯ :) KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ function injectRootElement() { var input = document.createElement('input'); input.placeholder = "App Started"; // -> File Changed document.body.appendChild(input); return input; } var input = injectRootElement(); APP STARTED

83. ЧУДА НЕТ. РАСХОДИМСЯ :) KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ APP STARTED function injectRootElement() { var input = document.createElement('input'); input.placeholder = “File Changed”; document.body.appendChild(input); return input; } var input = injectRootElement();

84. ЧУДА НЕТ. РАСХОДИМСЯ :) KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ APP STARTED FILE CHANGED function injectRootElement() { var input = document.createElement('input'); input.placeholder = “File Changed”; document.body.appendChild(input); return input; } var input = injectRootElement();

85. КАК УБРАТЬ ПОБОЧНЫЙ ЭФФЕКТ? KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ var input = injectRootElement(); if (module.hot) { // если включен режим HMR module.hot.accept(); // разрешить замену данного модуля // событие перед загрузкой новой версии модуля module.hot.dispose(function (data) { document.body.removeChild(input); // убираем побочный эффект });

87. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ import { defaults } from 'lodash'; export function kharkiv(conference) { return defaults(conference, { city: 'Kharkiv' }); } TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

88. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ import { defaults } from 'lodash'; export function kharkiv(conference) { return defaults(conference, { city: 'Kharkiv' }); } TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

89. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

90. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД ▸ Google Closure Compiler  (2009-)* KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

91. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД ▸ Google Closure Compiler  (2009-)* KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ▸ Browserify** (2010-)

92. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД ▸ Google Closure Compiler  (2009-)* KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ▸ Browserify** (2010-) ▸ Webpack (2012-)

93. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД ▸ Google Closure Compiler  (2009-)* KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ▸ Browserify** (2010-) ▸ Webpack (2012-) ▸ JSPM*** (2013-)

94. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД ▸ Google Closure Compiler  (2009-)* KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ▸ Browserify** (2010-) ▸ Webpack (2012-) ▸ JSPM*** (2013-) ▸ StealJS**** (2014-)

95. ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД ▸ Google Closure Compiler  (2009-)* KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ▸ Browserify** (2010-) ▸ Webpack (2012-) ▸ JSPM*** (2013-) ▸ StealJS**** (2014-) ▸ Rollup.js (2015-)

96. WEBPACK РАСКРЫВАЕТ СВОЙ ПОТЕНЦИАЛ ▸ React.js ▸ React.js + Redux ▸ Проекты с React-like библиотеками ▸ Проекты 90+% ФП ?? ▸ Самопальные Vanilla.js проекты (пишем HMR вручную) KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

97. WEBPACK МОЖЕТ ▸ Заменить собой на несложном проекте Gulp, Grunt ▸ Компилировать из очень многих распространенных форматов ▸ Ставить строгие зависимости между всеми файлами в приложении ▸ Подгружать части проекта асинхронно ▸ Выделять vendor bundle, common bundle, склеивать bundles ▸ Генерировать CSS, HTML файлы, несмотря на то что все модули — JS KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

98. ЧЕГО ЛУЧШЕ НЕ ДЕЛАТЬ С WEBPACK ▸ Ставить вместе с ним Babel 6 ▸ Использовать 2.0.0-beta прямо сейчас ▸ Таргетить сервер-сайд (библиотеки под node.js ) ▸ Создавать сайты с минимальным количеством JS ▸ Приложения, где нужно слишком много динамических require() ▸ Искать документацию про написание плагинов KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

99. KHARKIV.JS, 8 NOVEMBER 2015 :: КАК WEBPACK СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ ▸ https://webpack.github.io/analyse ▸ https://github.com/noomorph/asciiart-loader ▸ http://y2u.be/xsSnOQynTHs -  Dan Abramov: Live React: Hot Reloading with Time Travel ▸ HTTP2, System.import, JSPM - просто стоит почитать он их СПАСИБО ЗА ВНИМАНИЕ… И НЕВОШЕДШЕЕ В ПРЕЗЕНТАЦИЮ

Как Webpack сделал меня счастливее

Du liest eine Vorschau.

Hier ansehen

Как Webpack сделал меня счастливее

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Ähnlich wie Как Webpack сделал меня счастливее (20)

Aktuellste (20)