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

сделал меня счастливей

WEBPACK

KHARKIV.JS, 8 NOVEMBER 2015YAROSLAV SERHIEIEV, WIX.COM

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

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

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

REQUIRE.JS

SystemJSnamespaces?

REQUIRE.JS

SystemJSnamespaces?

source maps

live reload

REQUIRE.JS

SystemJSnamespaces?

minifylazy load

СЛОЖНО УВЯЗАТЬ МЕЖДУ СОБОЙ

source maps

RUNNER .JS MODULES

live reload

REQUIRE.JS

namespaces?

minify

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

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

▸ 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 СДЕЛАЛ МЕНЯ СЧАСТЛИВЕЕ :: ЯРОСЛАВ СЕРГЕЕВ

СОБИРАЕМ ПО ОЛД-СКУЛУ

СОБИРАЕМ ПО ОЛД-СКУЛУ▸ 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

ТЕ ЖЕ КОМАНДЫ, ТОЛЬКО В ПРОФИЛЬ :}> ЧЕРЕЗ GRUNTFILE.JS

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']);

▸ js

▸ css

▸ png

▸ woff

▸ txt

▸ xml

▸ hbs

▸ jsx

▸ ES6

▸ jpg

▸ ROBOTS.TXT

▸ html

▸ coffee

▸ typescript

▸ whatever

ВСЕ ОНИ — FIRST CLASS CITIZENS

HomePage.jsx

ContactsPage.jsx

HomePage.jsx

ContactsPage.jsx

[babel-loader] => .js, .map

HomePage.jsx

ContactsPage.jsx

HTMLindex.html

HTMLcontacts.html[babel-loader] => .js, .map

HomePage.jsx

ContactsPage.jsx

HTMLindex.html

HTMLcontacts.html[babel-loader] => .js, .map

StaticSiteGeneratorPlugin

HTMLindex.html

HTMLcontacts.html

HomePage.jsx

ContactsPage.jsx

HTMLindex.html

HTMLcontacts.html

HomePage.jsx

ContactsPage.jsx

HTMLindex.html

HTMLcontacts.html

HomePage.jsx

ContactsPage.jsx

HTMLindex.html

HTMLcontacts.html

HomePage.jsx

ContactsPage.jsx

CommonsChunkPlugin

HTMLindex.html

HTMLcontacts.html

HomePage.jsx

ContactsPage.jsx

CommonsChunkPlugin

HTMLindex.html

HTMLcontacts.html

HomePage.jsx

ContactsPage.jsx

CommonsChunkPluginAggressiveMergingPlugin

HTMLindex.html

HTMLcontacts.html

HomePage.jsx

ContactsPage.jsx

site.css

placeholder.png

Roboto.ttf

Roboto.woff

site.css

placeholder.png

Roboto.ttf

Roboto.woff

site.css

placeholder.png

Roboto.ttf

Roboto.woff

site.css

placeholder.png

Roboto.ttf

Roboto.woff

unused.png

КАК ВЫГЛЯДИТ ПРОСТЕЙШАЯ КОНФИГУРАЦИЯ В ИТОГЕ

module.exports = { context: path.resolve(__dirname, 'src'), entry: "./app.js", output: { path: './dist', filename: '[name].js' } };

module: { loaders: [{ test: /\.js$/, loader: ‘babel-loader', include: path.resolve(__dirname, 'src'), }], }, };

ES6 ЗАГРУЗЧИК

plugins: [ new HtmlWebpackPlugin({ template: path.join(src, 'index.html'), inject: 'body', }) ] };

HTML-ПЛАГИН

КАК REQUIRE’ИТЬ В WEBPACK?

Notation Sync (per file) Async (per file) Sync (mask) Async (mask)

CJS require(module) require.ensurerequire(expr)require.context

AMD define([modules]) require([modules]) N/A N/A

ES6/S.JS importSystem.import

(module)N/A

System.import(expr)

нестандартные функции Webpack доступно в 2.0.0-beta

ОПТОВЫЙ REQUIRE

System.import(‘./locales/‘ + lang).then(locale => /* … */);

▸ 0.0.js

▸ 1.0.js

▸ 2.0.js…

var locale = require(‘./locales/‘ + lang);

var locale = require.context(‘./locales’, true, /\.js$/);

▸ 0.0.js

▸ 1.0.js

▸ 2.0.js…

▸ 0.0.js

▸ 1.0.js

▸ 2.0.js…

▸ main.bundle.js <- [all locales]

▸ 0.0.js

▸ 1.0.js

▸ 2.0.js…

▸ main.bundle.js <- [all locales]

ContextReplacementPlugin

ЧТО ДЕЛАЕТ WEBPACK МОЩНЫМ И ПРОСТЫМ?

JS CSS PNG

JS JS JS

loaders

dependency analysis

JS CSS PNG

JS JS JS

loaders

dependency analysis

JS CSS PNG

JS JS JS

loaders

JAVASCRIPT - ЭТО

ВАМ НЕ

ЭТО

dependency analysis

JS CSS PNG

JS JS JS

loaders

dependency analysis

JS CSS PNG

JS JS JS

loaders

BUILD PIPELINE

dependency analysis

JS CSS PNG

JS JS JS

loaders

BUILD PIPELINEplugins

dependency analysis

JS CSS PNG

JS JS JS

loaders

HTML JS PNG CSSBUILD PIPELINEplugins

КАК БИНАРНИКИ ПРЕВРАЩАЮТСЯ В JAVASCRIPT-МОДУЛИ ?

var placeholderImage = require('assets/images/placeholder.png');

module.exports = {

createSafeImage: function (src) {

var img = document.createElement('img');

img.src = src || placeholderImage;

return img;

BASE64 URL OR…?

module.exports =

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA..."

BASE64 URL OR…?

module.exports =

"assets/images/placeholder.png"

"assets/placeholder.png?787efa438c612b89f46a812"

"assets/787efa438c612b89f46a812.png"

… И ЭТО БЫЛА СХЕМА РАБОТЫ URL-LOADER В WEBPACK

test: /\.png$/

URL-LOADER* limit = 8000

* name = [path][hash].[ext]

test: /\.png$/

var placeholderImage =

require('assets/images/placeholder.png');URL-LOADER* limit = 8000

test: /\.png$/

require('assets/images/placeholder.png');

module.exports =

test: /\.png$/

module.exports =

FILE-LOADER* name =[path][hash].[ext]

test: /\.png$/

module.exports =

"assets/images/787efa438c612b89f46a812.png";

FILE-LOADER* name =[path][hash].[ext]

test: /\.png$/

КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ

CSS SOURCE MAP

2 2CSSAUTOPREFIXED

SOURCE MAP

3JS 3 SOURCE MAP

SASS-LOADER

AUTOPREFIXER-LOADER

CSS-LOADER

STYLE-LOADER

КОМПОЗИЦИЯ ЗАГРУЗЧИКОВ

CSS SOURCE MAP

2 2CSSAUTOPREFIXED

SOURCE MAP

3JS 3 SOURCE MAP

SASS-LOADER

AUTOPREFIXER-LOADER

CSS-LOADER

STYLE-LOADER

ExtractTextPlugin

ПИШЕМ ASCII ART LOADER

ПОДКЛЮЧЕНИЕ ASCII

pre.innerHTML = require(‘asciiart?color=1!./cute-little-cat.png');

module: { loaders: [ { test: /ASCII_REGEX/, loader: ‘asciiart-loader?color=1’ }

require('images/ascii/cute-little-cat.png');

В ИТОГЕ ОН НАМ ВЕРНЕТ?

module.exports ="<b class="ansi-0">;</b> <b class="ansi-1">@</b>...";

КОМУ ТАКОЕ НАДО?

И ВСЕ-ТАКИ ПОЛУЧИЛОСЬ МИЛО

HOT MODULE REPLACEMENT

[ WITHOUT REACT.JS + REDUX]

ДЛЯ ЭТОГО ПОНАДОБИТСЯ WEBPACK-DEV-SERVER

KIT CAT CLOCK

ЧУДА НЕТ. РАСХОДИМСЯ :)

function injectRootElement() {

var input = document.createElement('input');

input.placeholder = "App Started"; // -> File Changed

document.body.appendChild(input);

return input;

var input = injectRootElement();

input.placeholder = "App Started"; // -> File Changed

return input;

APP STARTED

input.placeholder = “File Changed”;

return input;

APP STARTED

FILE CHANGEDfunction injectRootElement() {

input.placeholder = “File Changed”;

return input;

КАК УБРАТЬ ПОБОЧНЫЙ ЭФФЕКТ?

if (module.hot) { // если включен режим HMR

module.hot.accept(); // разрешить замену данного модуля

// событие перед загрузкой новой версии модуля

module.hot.dispose(function (data) {

document.body.removeChild(input); // убираем побочный эффект

import { defaults } from 'lodash';

export function kharkiv(conference) {

return defaults(conference, { city: 'Kharkiv' });

TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

import { defaults } from 'lodash';

export function kharkiv(conference) {

return defaults(conference, { city: 'Kharkiv' });

TREE SHAKING — WEBPACK 2 СТАЛ ЕЩЕ УМНЕЕ

ТАК ПРИСТАЛЬНО УМЕЮТ СМОТРЕТЬ НА ТВОЙ КОД

▸ Google Closure Compiler(2009-)*

▸ Browserify** (2010-)

▸ Webpack (2012-)

▸ JSPM*** (2013-)

▸ Webpack (2012-)

▸ JSPM*** (2013-)

▸ StealJS**** (2014-)

▸ Webpack (2012-)

▸ JSPM*** (2013-)

▸ StealJS**** (2014-)

▸ Rollup.js (2015-)

WEBPACK РАСКРЫВАЕТ СВОЙ ПОТЕНЦИАЛ

▸ React.js

▸ React.js + Redux

▸ Проекты с React-like библиотеками

▸ Проекты 90+% ФП ??

▸ Самопальные Vanilla.js проекты (пишем HMR вручную)

WEBPACK МОЖЕТ

▸ Заменить собой на несложном проекте Gulp, Grunt

▸ Компилировать из очень многих распространенных форматов

▸ Ставить строгие зависимости между всеми файлами в приложении

▸ Подгружать части проекта асинхронно

▸ Выделять vendor bundle, common bundle, склеивать bundles

▸ Генерировать CSS, HTML файлы, несмотря на то что все модули — JS

ЧЕГО ЛУЧШЕ НЕ ДЕЛАТЬ С WEBPACK

▸ Ставить вместе с ним Babel 6

▸ Использовать 2.0.0-beta прямо сейчас

▸ Таргетить сервер-сайд (библиотеки под node.js )

▸ Создавать сайты с минимальным количеством JS

▸ Приложения, где нужно слишком много динамических require()

▸ Искать документацию про написание плагинов

▸ 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 сделал меня счастливее

Technology

[XECon2016] A-2 임형주 Webpack 실무 적용전략

大規模プロダクト Webpack やっていく気持ち

Einführung in Xilinx Webpack ISE 10 - NTB Buchs · 2011-05-19 · INTERSTAATLICHE HOCHSCHULE Webpack ISE Tutorial FÜR TECHNIK BUCHS NTB Einführung in Xilinx Webpack ISE 10.1 Diese

Webpack - просто о сложном

2015-11-07 01 Виталий Кравцов. Webpack: человеческий подход к разработке веб приложений

IP CORES ISE WEBPACK - itmorelia.edu.mx

Сделал ученик 9 класса Д ГБОУ СОШ №1370 Алыев Шукюр

Advanced webpack

Hey webpack

Ели и опушки снег запорошил, сделал я кормушки, хлеба накрошил

FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk)

Integrating tornado and webpack

Czym jest webpack i dlaczego chcesz go używać?

ЭВС. Как помочь другим людям стать счастливее?

Modern Web Conf 2015 ReactJS and Webpack · Modern Web Conf 2015 ReactJS and Webpack for Rails Tse-Ching Ho 2015-05-16

Webpack | Jakub Kulhan - Skrz.cz

Menggunakan ise webpack 1

第 3 章 Webpack+Vue.js开发准备 - Tsinghua第 3 章 Webpack+Vue.js开发准备所有的Vue.js 项目都是在Webpack 的框架下进行开发的。可以说vue-cli 直接把

НИТРОГЛИЦЕРИН СДЕЛАЛ НОБЕЛЯ

webpack: 7 бед - один ответ