SlideShare a Scribd company logo

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

Marcin Gajda, profile picture
Marcin Gajda

Webpack is a module bundler that processes modules and their dependencies to create static assets for applications. The document provides a detailed guide on installing, configuring, and using Webpack with various modules, plugins, and loaders for different file types such as JavaScript, CSS, and images. It also discusses advanced features like handling multiple entry points, common chunks, and utilizing dynamic imports.

Software
Related topics:
Web Development
1 of 62
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
Czym jest webpack i dlaczego chcesz go używać? Marcin Gajda The Software House
W telegraficznym skrócie webpack przetwarza moduły i ich zależności i tworzy statyczne assety dla naszej aplikacji
Instalacja i uruchamianie npm init sudo npm install webpack -g webpack ./entry_point.js bundle.js # lub... webpack --config webpack.config.js
Instalacja i uruchamianie npm init sudo npm install webpack -g webpack ./entry_point.js bundle.js # lub... webpack --config webpack.config.js
Krok pierwszy Wczytanie punktów wejściowych aplikacji cat.js
Plik konfiguracyjny webpack.config.js module.exports = { context: __dirname+'/assets', entry: { cat: './cat.js' }, output: { path: 'compiled', filename: '[name]-bundle.js', publicPath: 'compiled/' }, module: {}, plugins: {}, resolve: {} };
Plik konfiguracyjny module.exports = { context: __dirname+'/assets', entry: { cat: './cat.js' }, output: { path: 'compiled', filename: '[name]-bundle.js', publicPath: 'compiled/' }, module: {}, plugins: {}, resolve: {} }; webpack.config.js assets/cat.js → compiled/cat-bundle.js
Krok drugi Kompilacja skryptów, grafik, styli itd. cat.js head.js body.js
Krok drugi Kompilacja skryptów, grafik, styli itd. cat.js head.js body.js
Importowanie statyczne catsHead = require('./cat/head.js'); catsBody = require('./cat/body.js'); console.log(catsHead()); console.log(catsBody()); head = function(){ return 'cats head' }; module.exports = head; assets/cat/head.js assets/cat.js body = function(){ return 'cats body' }; module.exports = body; assets/cat/body.js cat.js head.js body.js
Test importowania statycznego /uszanowanko/webpack> webpack --display-modules
Test importowania statycznego /uszanowanko/webpack> webpack --display-modules Hash: f7f0a8c9c6d85acfaf68 Version: webpack 1.12.14 Time: 57ms Asset Size Chunks Chunk Names cat-bundle.js 2.05 kB 0 [emitted] cat [0] ./cat.js 122 bytes {0} [built] [1] ./cat/head.js 66 bytes {0} [built] [2] ./cat/body.js 66 bytes {0} [built] /uszanowanko/webpack>
Importowanie dynamiczne require(['./cat/head', './cat/body'], function(catsHead, catsBody){ console.log(catsHead()); console.log(catsBody()); } ); head = function(){ return 'cats head' }; module.exports = head; assets/cat/head.js assets/cat.js body = function(){ return 'cats body' }; module.exports = body; assets/cat/body.js cat.js head.js body.js
Test importowania dynamicznego /uszanowanko/webpack> webpack --display-modules
Test importowania dynamicznego /uszanowanko/webpack> webpack --display-modules Hash: f7f0a8c9c6d85acfaf68 Version: webpack 1.12.14 Time: 57ms Asset Size Chunks Chunk Names cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 434 kB 1 [emitted] [0] ./cat.js 151 bytes {0} [built] [1] ./cat/head.js 66 bytes {1} [built] [2] ./cat/body.js 66 bytes {1} [built] /uszanowanko/webpack>
Wiele “entry pointów” module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //... }; webpack.config.js assets/cat.js → compiled/cat-bundle.js assets/dog.js → compiled/dog-bundle.js
Wiele “entry pointów” module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //... }; webpack.config.js assets/cat.js → compiled/cat-bundle.js assets/dog.js → compiled/dog-bundle.js dog.js head.coffee body.coffee cat.js head.js body.js
Wiele “entry pointów” module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //... }; webpack.config.js assets/cat.js → compiled/cat-bundle.js assets/dog.js → compiled/dog-bundle.js dog.js head.coffee body.coffee cat.js head.js body.js
Loadery module.exports = { //... resolve: { extensions: ['', '.coffee', '.js'] }, module: { loaders: [ { test: /.coffee$/, loader: 'coffee-loader' } ] } }; webpack.config.js Loadery to małe moduły, które przetwarzają wskazane im pliki i zwracają je w formie, która może zostać zapisana lub ulec dalszemu przetwarzaniu przez następne loadery. npm install coffee-script coffee-loader --save
Loadery module.exports = { //... resolve: { extensions: ['', '.coffee', '.js'] }, module: { loaders: [ { test: /.coffee$/, loader: 'coffee-loader' } ] } }; webpack.config.js Loadery to małe moduły, które przetwarzają wskazane im pliki i zwracają je w formie, która może zostać zapisana lub ulec dalszemu przetwarzaniu przez następne loadery. npm install coffee-script coffee-loader --save
Transpilacja dogsHead = require('./dog/head'); dogsBody = require('./dog/body'); console.log(dogsHead()); console.log(dogsBody()); head = -> "dogs head" module.exports = head; assets/dog/head.coffee assets/dog.js body = -> "dogs body" module.exports = body; assets/dog/body.coffee dog.js head.coffee body.coffee
Transpilacja /uszanowanko/webpack> webpack --display-modules
Transpilacja /uszanowanko/webpack> webpack --display-modules Hash: 035ccd9c22a0de9b0c61 Version: webpack 1.12.14 Time: 115ms Asset Size Chunks Chunk Names cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 434 bytes 1 [emitted] dog-bundle.js 2.13 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 66 bytes {1} [built] [2] ./cat/body.js 66 bytes {1} [built] [3] ./dog/head.coffee 80 bytes {2} [built] [4] ./dog/body.coffee 80 bytes {2} [built]
Transpilacja /uszanowanko/webpack> webpack --display-modules Hash: 035ccd9c22a0de9b0c61 Version: webpack 1.12.14 Time: 115ms Asset Size Chunks Chunk Names cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 434 bytes 1 [emitted] dog-bundle.js 2.13 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 66 bytes {1} [built] [2] ./cat/body.js 66 bytes {1} [built] [3] ./dog/head.coffee 80 bytes {2} [built] [4] ./dog/body.coffee 80 bytes {2} [built]
Grafiki w skryptach var $ = require('jquery'); var catHeadImage = require('../images/cat_head.png'); $('.head').append('<img src="'+catHeadImage+'" />'); //... assets/cat/head.js module.exports = { //... module: { loaders: [ { test: /.coffee$/, loader: "coffee-loader" }, { test: /.(png|jpg|gif|bmp)/, loader: "file" } ] } }; webpack.config.js
Grafiki w skryptach /uszanowanko/webpack> webpack --display-modules
Grafiki w skryptach /uszanowanko/webpack> webpack --display-modules Hash: a2bd8c43ab5d095496be Version: webpack 1.12.14 Time: 342ms Asset Size Chunks Chunk Names 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 268 kB 1 [emitted] dog-bundle.js 2.14 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [2] ../~/jquery/dist/jquery.js 259 kB {1} [built] [3] ./images/cat_head.png 82 bytes {1} [built] [4] ./cat/body.js 66 bytes {1} [built] [5] ./dog/head.coffee 80 bytes {2} [built] [6] ./dog/body.coffee 80 bytes {2} [built]
CSS require('../styles/cats_body'); //... assets/cat/body.js .body{ width: 300px; height: 250px; background: url('~/images/cat_body.png'); } assets/styles/cats_body.scss
CSS module.exports = { //... resolve: { extensions: ['', '.coffee', '.js', '.scss'] }, module: { loaders: [ //... { test: /.scss$/, loaders: ["style", "css", "sass"] } ] } }; webpack.config.js
CSS /uszanowanko/webpack> webpack --display-modules
CSS /uszanowanko/webpack> webpack --display-modules Hash: bdb3652f781ccb917057 Version: webpack 1.12.14 Time: 2366ms Asset Size Chunks Chunk Names 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 279 kB 1 [emitted] dog-bundle.js 2.12 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [2] ../~/jquery/dist/jquery.js 259 kB {1} [built] [3] ./images/cat_head.png 82 bytes {1} [built] [4] ./cat/body.js 99 bytes {1} [built] [5] ./styles/cats_body.scss 1.06 kB {1} [built] [6] ../~/css-loader!../~/sass-loader!./styles/cats_body.scss 268 bytes {1} [built] [7] ../~/css-loader/lib/css-base.js 1.51 kB {1} [built] [8] ./images/cat_body.png 82 bytes {1} [built] [9] ../~/style-loader/addStyles.js 7.21 kB {1} [built] [10] ./dog/head.coffee 80 bytes {2} [built] [11] ./dog/body.coffee 80 bytes {2} [built]
Test webpacka <html> <head> <meta charset="UTF-8"> <title>Cat</title> <script src="compiled/cat-bundle.js"></script> </head> <body> <div class="head"></div> <div class="body"></div> </body> </html> cat.html
Test webpacka <html> <head> <meta charset="UTF-8"> <title>Cat</title> <script src="compiled/cat-bundle.js"></script> </head> <body> <div class="head"></div> <div class="body"></div> </body> </html> cat.html
Test webpacka <html> <head> <meta charset="UTF-8"> <title>Cat</title> <script src="compiled/cat-bundle.js"></script> </head> <body> <div class="head"></div> <div class="body"></div> </body> </html> cat.html
Test webpacka
Test webpacka
Test webpacka
Krok trzeci Dodajemy dodatkowe wtyczki (plugins) var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { //... plugins: [ new ExtractTextPlugin("styles-[name].css", {allChunks:true}) ], module: { loaders: [ //... { test: /.scss$/, loader: ExtractTextPlugin.extract(["css", "sass"], {publicPath: ''}) } ] } }; webpack.config.js Wtyczki to moduły, które pozwalają na wykonanie dodatkowych czynności podczas działania skryptu webpacka. Mogą dodawać pliki, usuwać je lub ponownie przetwarzać.
Ekstrakcja CSS /uszanowanko/webpack> webpack
Ekstrakcja CSS /uszanowanko/webpack> webpack Hash: 1d336bd3e0dba1633bcc Version: webpack 1.12.12 Time: 749ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 268 kB 1 [emitted] dog-bundle.js 2.15 kB 2 [emitted] dog styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [4] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
Wspólne fragmenty kodu
Wspólne fragmenty kodu uszanowanko = require('./common/uszanowanko'); uszanowanko(); //... uszanowanko = require('./common/uszanowanko'); uszanowanko(); //... assets/dog.js assets/cat.js $ = require('jquery'); wow = function(){ $('body').prepend('<h2>Uszanowanko, wow!</h2>'); }; module.exports = wow; assets/common/uszanowanko.js dog.jscat.js uszanowanko.js
Wspólne fragmenty kodu var webpack = require('webpack'); module.exports = { //... plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js', chunks: ['dog', 'cat'] }), //... ] }; webpack.config.js
Wspólne fragmenty kodu /uszanowanko/webpack> webpack
Wspólne fragmenty kodu /uszanowanko/webpack> webpack Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
Wspólne fragmenty kodu /uszanowanko/webpack> webpack Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules /uszanowanko/webpack> webpack Hash: 1d336bd3e0dba1633bcc Version: webpack 1.12.12 Time: 749ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 268 kB 1 [emitted] dog-bundle.js 2.15 kB 2 [emitted] dog styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [4] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
Wspólne fragmenty kodu /uszanowanko/webpack> webpack Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
Inne ciekawe wtyczki - UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików - DedupePlugin - wyszukuje zduplikowane pliki i je łączy - ProvidePlugin - automatycznie importuje moduły na podstawie zmiennych - CleanupPlugin - czyści folder na kompilowane pliki przed emisją nowych - AssetsPlugin - zrzuca do pliku JSON informacje o wyemitowanych plikach, które należy dołączyć do dokumentu HTML
Inne ciekawe wtyczki - UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików - DedupePlugin - wyszukuje zduplikowane pliki i je łączy - ProvidePlugin - automatycznie importuje moduły na podstawie zmiennych - CleanupPlugin - czyści folder na kompilowane pliki przed emisją nowych - AssetsPlugin - zrzuca do pliku JSON informacje o wyemitowanych plikach, które należy dołączyć do dokumentu HTML { "cat": { "js": "compiled/cat-bundle.js", "css": "compiled/styles-cat.css" }, "dog": { "js": "compiled/dog-bundle.js" }, "common": { "js": "compiled/common.js" } }
Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
Tryb watch /uszanowanko/webpack> webpack --watch --progress
Tryb watch /uszanowanko/webpack> webpack --watch --progress Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [ emitted] + 3 hidden modules
Tryb watch common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules Hash: 23ce8cce5f54a398b346 Version: webpack 1.12.12 Time: 13ms Asset Size Chunks Chunk Names cat-bundle.js 620 bytes 0 [emitted] cat styles-cat.css 142 bytes 0 [emitted] cat cat-bundle.js.map 507 bytes 0 [emitted] cat styles-cat.css.map 91 bytes 0 [emitted] cat [0] ./cat.js 201 bytes {0} [built] + 9 hidden modules
Serwer developerski npm install webpack-dev-server -g webpack-dev-server --content-base . // http://localhost:8080/cat.html
Serwer developerski - autorealod // Poprzez iframe ---> // http://localhost:8080/webpack-dev-server/cat.html webpack-dev-server // Standardowe // http://localhost:8080/cat.html webpack-dev-server --inline
Hot module reload webpack-dev-server --inline --hot if(module.hot) { module.hot.accept("./common/uszanowanko" , function() { var uszanowanko = require('./common/uszanowanko' ); var $ = require('jquery'); $('h2').remove(); uszanowanko(); }); }
Podsumowanie Dlaczego chcesz używać webpacka? - Potrzebujesz skalowalności w projekcie - Masz duży projekt z dużą ilością wspólnych zależności - Chcesz łatwo skonfigurować transpilację - Lubisz porządek w zależnościach - Nie lubisz zmiennych globalnych A dlaczego nie chcesz? - Masz istniejący projekt, który będzie trzeba migrować - Bo naprawdę potrzebujesz task-runnera, a nie bundlera ;)
Kod z prezentacji https://github.com/marcingajda/uszanowanko-webpack
Pytania? @marcingajda91

More Related Content

PDF
mapserver_install_linux
tutorialsruby
 
PDF
YouDrup_in_Drupal
tutorialsruby
 
PDF
Alfredo-PUMEX
tutorialsruby
 
KEY
PyCon AU 2010 - Getting Started With Apache/mod_wsgi.
Graham Dumpleton
 
PDF
Getting Started with Couchbase Ruby
Sergey Avseyev
 
DOCX
SCasia 2018 MSFT hands on session for Azure Batch AI
Hiroshi Tanaka
 
PPTX
Harmonious Development: Standardizing The Deployment Process via Vagrant and ...
Acquia
 
PDF
Drupal 8 Theme System: The Backend of Frontend
Acquia
 
mapserver_install_linux
tutorialsruby
 
YouDrup_in_Drupal
tutorialsruby
 
Alfredo-PUMEX
tutorialsruby
 
PyCon AU 2010 - Getting Started With Apache/mod_wsgi.
Graham Dumpleton
 
Getting Started with Couchbase Ruby
Sergey Avseyev
 
SCasia 2018 MSFT hands on session for Azure Batch AI
Hiroshi Tanaka
 
Harmonious Development: Standardizing The Deployment Process via Vagrant and ...
Acquia
 
Drupal 8 Theme System: The Backend of Frontend
Acquia
 

What's hot (20)

PDF
Ansible : what's ansible & use case by REX
Saewoong Lee
 
ODT
Hadoop on aws amazon
Sandish Kumar H N
 
PPTX
Software Defined Datacenter
NETWAYS
 
PDF
Puppet at janrain
Puppet
 
PDF
Automated Java Deployments With Rpm
Martin Jackson
 
PDF
"Ops Tools with Perl" 2012/05/12 Hokkaido.pm
Ryosuke IWANAGA
 
DOC
Apache hadoop 2_installation
sushantbit04
 
PDF
Puppet: Eclipsecon ALM 2013
grim_radical
 
PPT
Drupal Performance - SerBenfiquista.com Case Study
hernanibf
 
KEY
Deploying
soon
 
PDF
Hacking ansible
bcoca
 
PDF
Python And My Sq Ldb Module
AkramWaseem
 
PDF
Ansible leveraging 2.0
bcoca
 
PDF
Getting Started with Ansible
ahamilton55
 
PDF
Future Decoded - Node.js per sviluppatori .NET
Gianluca Carucci
 
PDF
Build Automation 101
Martin Jackson
 
PDF
Performance Improvements in Browsers
jeresig
 
PDF
Kickin' Ass with Cache-Fu (without notes)
err
 
PDF
“warpdrive”, making Python web application deployment magically easy.
Graham Dumpleton
 
PDF
Datagrids with Symfony 2, Backbone and Backgrid
eugenio pombi
 
Ansible : what's ansible & use case by REX
Saewoong Lee
 
Hadoop on aws amazon
Sandish Kumar H N
 
Software Defined Datacenter
NETWAYS
 
Puppet at janrain
Puppet
 
Automated Java Deployments With Rpm
Martin Jackson
 
"Ops Tools with Perl" 2012/05/12 Hokkaido.pm
Ryosuke IWANAGA
 
Apache hadoop 2_installation
sushantbit04
 
Puppet: Eclipsecon ALM 2013
grim_radical
 
Drupal Performance - SerBenfiquista.com Case Study
hernanibf
 
Deploying
soon
 
Hacking ansible
bcoca
 
Python And My Sq Ldb Module
AkramWaseem
 
Ansible leveraging 2.0
bcoca
 
Getting Started with Ansible
ahamilton55
 
Future Decoded - Node.js per sviluppatori .NET
Gianluca Carucci
 
Build Automation 101
Martin Jackson
 
Performance Improvements in Browsers
jeresig
 
Kickin' Ass with Cache-Fu (without notes)
err
 
“warpdrive”, making Python web application deployment magically easy.
Graham Dumpleton
 
Datagrids with Symfony 2, Backbone and Backgrid
eugenio pombi
 
Ad

Viewers also liked (12)

PDF
Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka
Marcin Gajda
 
PDF
Angular Restmod
Marcin Gajda
 
PDF
Packing it all: JavaScript module bundling from 2000 to now
Derek Willian Stavis
 
PDF
Webpack Tutorial, Uppsala JS
Emil Öberg
 
PDF
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
 
PPTX
Bundling your front-end with Webpack
Danillo Corvalan
 
PDF
webpack 101 slides
mattysmith
 
PDF
Webpack slides
Андрей Вандакуров
 
PDF
Bundle your modules with Webpack
Jake Peyser
 
PDF
webpack 入門
Anna Su
 
PDF
reveal.js 3.0.0
Hakim El Hattab
 
PDF
Webpack
DataArt
 
Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka
Marcin Gajda
 
Angular Restmod
Marcin Gajda
 
Packing it all: JavaScript module bundling from 2000 to now
Derek Willian Stavis
 
Webpack Tutorial, Uppsala JS
Emil Öberg
 
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
 
Bundling your front-end with Webpack
Danillo Corvalan
 
webpack 101 slides
mattysmith
 
Webpack slides
Андрей Вандакуров
 
Bundle your modules with Webpack
Jake Peyser
 
webpack 入門
Anna Su
 
reveal.js 3.0.0
Hakim El Hattab
 
Webpack
DataArt
 
Ad

Similar to Czym jest webpack i dlaczego chcesz go używać? (20)

PPTX
The hitchhiker's guide to the Webpack - Sara Vieira - Codemotion Amsterdam 2017
Codemotion
 
PDF
От экспериментов с инфраструктурой до внедрения в продакшен
Dmitry Makhnev
 
PDF
«От экспериментов с инфраструктурой до внедрения в продакшен»​
FDConf
 
PDF
Resource Registries: Plone Conference 2014
Rob Gietema
 
PPTX
Custom gutenberg block development with React
Imran Sayed
 
PDF
Rails + Webpack
Khor SoonHin
 
PDF
Resource registries plone conf 2014
Ramon Navarro
 
PDF
A re introduction to webpack - reactfoo - mumbai
Praveen Puglia
 
PDF
Coscup x ruby conf tw 2021 google cloud buildpacks 剖析與實踐
KAI CHU CHUNG
 
PDF
Vue routing tutorial getting started with vue router
Katy Slemon
 
PPTX
Lecture: Webpack 4
Sergei Iastrebov
 
PPTX
Custom gutenberg block development in react
Imran Sayed
 
PDF
How to replace rails asset pipeline with webpack?
Tomasz Bak
 
PDF
Building and deploying React applications
Astrails
 
PDF
The new static resources framework
marcplmer
 
PPTX
SBT Concepts, part 2
Renat Bekbolatov
 
PDF
Node.js & Twitter Bootstrap Crash Course
Aaron Silverman
 
DOCX
! Modernizr v2.0.6 httpwww.modernizr.com Copyri.docx
MARRY7
 
PDF
An introduction to Apache Hive CI and QA
Stamatis Zampetakis
 
PDF
reactjs-quiz..docs.pdf
AyanSarkar78
 
The hitchhiker's guide to the Webpack - Sara Vieira - Codemotion Amsterdam 2017
Codemotion
 
От экспериментов с инфраструктурой до внедрения в продакшен
Dmitry Makhnev
 
«От экспериментов с инфраструктурой до внедрения в продакшен»​
FDConf
 
Resource Registries: Plone Conference 2014
Rob Gietema
 
Custom gutenberg block development with React
Imran Sayed
 
Rails + Webpack
Khor SoonHin
 
Resource registries plone conf 2014
Ramon Navarro
 
A re introduction to webpack - reactfoo - mumbai
Praveen Puglia
 
Coscup x ruby conf tw 2021 google cloud buildpacks 剖析與實踐
KAI CHU CHUNG
 
Vue routing tutorial getting started with vue router
Katy Slemon
 
Lecture: Webpack 4
Sergei Iastrebov
 
Custom gutenberg block development in react
Imran Sayed
 
How to replace rails asset pipeline with webpack?
Tomasz Bak
 
Building and deploying React applications
Astrails
 
The new static resources framework
marcplmer
 
SBT Concepts, part 2
Renat Bekbolatov
 
Node.js & Twitter Bootstrap Crash Course
Aaron Silverman
 
! Modernizr v2.0.6 httpwww.modernizr.com Copyri.docx
MARRY7
 
An introduction to Apache Hive CI and QA
Stamatis Zampetakis
 
reactjs-quiz..docs.pdf
AyanSarkar78
 

Recently uploaded (20)

PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
Conacent Consulting
 
PDF
top salesforce developer skills in 2025.pdf
CloudMetic
 
PDF
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
pts464036
 
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 41
ghrom2211g
 
PPTX
CHAPTER 12 - CYBER SECURITY AND FUTURE SKILLS (1) (1).pptx
AnujKumar530915
 
PDF
AI in Product Development-omnex systems
omnex systems
 
PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
TechBuilder
 
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
William Chong
 
PPTX
ManageIQ - Sprint 268 Review - Slide Deck
ManageIQ
 
PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
rohnjim07
 
PPTX
VVF-Customer-Presentation2025-Ver1.9.pptx
blackmambaettijean
 
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
ghrom2211g
 
PDF
How to Migrate SBCGlobal Email to Yahoo Easily
raymondjones7273
 
PPTX
CHAPTER 2 - PM Management and IT Context
KevinPutra14
 
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
itskinga12
 
PPTX
Online Work Permit System for Fast Permit Processing
SHEQ Network Limited
 
PDF
2025 Textile ERP Trends: SAP, Odoo & Oracle
Aetos Technologies
 
PDF
Softaken Excel to vCard Converter Software.pdf
markwillsonmw004
 
PPTX
ISO 45001 Occupational Health and Safety Management System
EHA Soft Solutions
 
PDF
System and Network Administraation Chapter 3
jaramharo
 
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
Conacent Consulting
 
top salesforce developer skills in 2025.pdf
CloudMetic
 
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
pts464036
 
Internet Downloader Manager (IDM) Crack 6.42 Build 41
ghrom2211g
 
CHAPTER 12 - CYBER SECURITY AND FUTURE SKILLS (1) (1).pptx
AnujKumar530915
 
AI in Product Development-omnex systems
omnex systems
 
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
TechBuilder
 
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
William Chong
 
ManageIQ - Sprint 268 Review - Slide Deck
ManageIQ
 
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
rohnjim07
 
VVF-Customer-Presentation2025-Ver1.9.pptx
blackmambaettijean
 
Adobe Illustrator 28.6 Crack My Vision of Vector Design
ghrom2211g
 
How to Migrate SBCGlobal Email to Yahoo Easily
raymondjones7273
 
CHAPTER 2 - PM Management and IT Context
KevinPutra14
 
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
itskinga12
 
Online Work Permit System for Fast Permit Processing
SHEQ Network Limited
 
2025 Textile ERP Trends: SAP, Odoo & Oracle
Aetos Technologies
 
Softaken Excel to vCard Converter Software.pdf
markwillsonmw004
 
ISO 45001 Occupational Health and Safety Management System
EHA Soft Solutions
 
System and Network Administraation Chapter 3
jaramharo
 

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

  • 1. Czym jest webpack i dlaczego chcesz go używać? Marcin Gajda The Software House
  • 2. W telegraficznym skrócie webpack przetwarza moduły i ich zależności i tworzy statyczne assety dla naszej aplikacji
  • 3. Instalacja i uruchamianie npm init sudo npm install webpack -g webpack ./entry_point.js bundle.js # lub... webpack --config webpack.config.js
  • 4. Instalacja i uruchamianie npm init sudo npm install webpack -g webpack ./entry_point.js bundle.js # lub... webpack --config webpack.config.js
  • 5. Krok pierwszy Wczytanie punktów wejściowych aplikacji cat.js
  • 6. Plik konfiguracyjny webpack.config.js module.exports = { context: __dirname+'/assets', entry: { cat: './cat.js' }, output: { path: 'compiled', filename: '[name]-bundle.js', publicPath: 'compiled/' }, module: {}, plugins: {}, resolve: {} };
  • 7. Plik konfiguracyjny module.exports = { context: __dirname+'/assets', entry: { cat: './cat.js' }, output: { path: 'compiled', filename: '[name]-bundle.js', publicPath: 'compiled/' }, module: {}, plugins: {}, resolve: {} }; webpack.config.js assets/cat.js → compiled/cat-bundle.js
  • 8. Krok drugi Kompilacja skryptów, grafik, styli itd. cat.js head.js body.js
  • 9. Krok drugi Kompilacja skryptów, grafik, styli itd. cat.js head.js body.js
  • 10. Importowanie statyczne catsHead = require('./cat/head.js'); catsBody = require('./cat/body.js'); console.log(catsHead()); console.log(catsBody()); head = function(){ return 'cats head' }; module.exports = head; assets/cat/head.js assets/cat.js body = function(){ return 'cats body' }; module.exports = body; assets/cat/body.js cat.js head.js body.js
  • 12. Test importowania statycznego /uszanowanko/webpack> webpack --display-modules Hash: f7f0a8c9c6d85acfaf68 Version: webpack 1.12.14 Time: 57ms Asset Size Chunks Chunk Names cat-bundle.js 2.05 kB 0 [emitted] cat [0] ./cat.js 122 bytes {0} [built] [1] ./cat/head.js 66 bytes {0} [built] [2] ./cat/body.js 66 bytes {0} [built] /uszanowanko/webpack>
  • 13. Importowanie dynamiczne require(['./cat/head', './cat/body'], function(catsHead, catsBody){ console.log(catsHead()); console.log(catsBody()); } ); head = function(){ return 'cats head' }; module.exports = head; assets/cat/head.js assets/cat.js body = function(){ return 'cats body' }; module.exports = body; assets/cat/body.js cat.js head.js body.js
  • 15. Test importowania dynamicznego /uszanowanko/webpack> webpack --display-modules Hash: f7f0a8c9c6d85acfaf68 Version: webpack 1.12.14 Time: 57ms Asset Size Chunks Chunk Names cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 434 kB 1 [emitted] [0] ./cat.js 151 bytes {0} [built] [1] ./cat/head.js 66 bytes {1} [built] [2] ./cat/body.js 66 bytes {1} [built] /uszanowanko/webpack>
  • 16. Wiele “entry pointów” module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //... }; webpack.config.js assets/cat.js → compiled/cat-bundle.js assets/dog.js → compiled/dog-bundle.js
  • 17. Wiele “entry pointów” module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //... }; webpack.config.js assets/cat.js → compiled/cat-bundle.js assets/dog.js → compiled/dog-bundle.js dog.js head.coffee body.coffee cat.js head.js body.js
  • 18. Wiele “entry pointów” module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //... }; webpack.config.js assets/cat.js → compiled/cat-bundle.js assets/dog.js → compiled/dog-bundle.js dog.js head.coffee body.coffee cat.js head.js body.js
  • 19. Loadery module.exports = { //... resolve: { extensions: ['', '.coffee', '.js'] }, module: { loaders: [ { test: /.coffee$/, loader: 'coffee-loader' } ] } }; webpack.config.js Loadery to małe moduły, które przetwarzają wskazane im pliki i zwracają je w formie, która może zostać zapisana lub ulec dalszemu przetwarzaniu przez następne loadery. npm install coffee-script coffee-loader --save
  • 20. Loadery module.exports = { //... resolve: { extensions: ['', '.coffee', '.js'] }, module: { loaders: [ { test: /.coffee$/, loader: 'coffee-loader' } ] } }; webpack.config.js Loadery to małe moduły, które przetwarzają wskazane im pliki i zwracają je w formie, która może zostać zapisana lub ulec dalszemu przetwarzaniu przez następne loadery. npm install coffee-script coffee-loader --save
  • 21. Transpilacja dogsHead = require('./dog/head'); dogsBody = require('./dog/body'); console.log(dogsHead()); console.log(dogsBody()); head = -> "dogs head" module.exports = head; assets/dog/head.coffee assets/dog.js body = -> "dogs body" module.exports = body; assets/dog/body.coffee dog.js head.coffee body.coffee
  • 23. Transpilacja /uszanowanko/webpack> webpack --display-modules Hash: 035ccd9c22a0de9b0c61 Version: webpack 1.12.14 Time: 115ms Asset Size Chunks Chunk Names cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 434 bytes 1 [emitted] dog-bundle.js 2.13 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 66 bytes {1} [built] [2] ./cat/body.js 66 bytes {1} [built] [3] ./dog/head.coffee 80 bytes {2} [built] [4] ./dog/body.coffee 80 bytes {2} [built]
  • 24. Transpilacja /uszanowanko/webpack> webpack --display-modules Hash: 035ccd9c22a0de9b0c61 Version: webpack 1.12.14 Time: 115ms Asset Size Chunks Chunk Names cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 434 bytes 1 [emitted] dog-bundle.js 2.13 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 66 bytes {1} [built] [2] ./cat/body.js 66 bytes {1} [built] [3] ./dog/head.coffee 80 bytes {2} [built] [4] ./dog/body.coffee 80 bytes {2} [built]
  • 25. Grafiki w skryptach var $ = require('jquery'); var catHeadImage = require('../images/cat_head.png'); $('.head').append('<img src="'+catHeadImage+'" />'); //... assets/cat/head.js module.exports = { //... module: { loaders: [ { test: /.coffee$/, loader: "coffee-loader" }, { test: /.(png|jpg|gif|bmp)/, loader: "file" } ] } }; webpack.config.js
  • 26. Grafiki w skryptach /uszanowanko/webpack> webpack --display-modules
  • 27. Grafiki w skryptach /uszanowanko/webpack> webpack --display-modules Hash: a2bd8c43ab5d095496be Version: webpack 1.12.14 Time: 342ms Asset Size Chunks Chunk Names 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 268 kB 1 [emitted] dog-bundle.js 2.14 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [2] ../~/jquery/dist/jquery.js 259 kB {1} [built] [3] ./images/cat_head.png 82 bytes {1} [built] [4] ./cat/body.js 66 bytes {1} [built] [5] ./dog/head.coffee 80 bytes {2} [built] [6] ./dog/body.coffee 80 bytes {2} [built]
  • 29. CSS module.exports = { //... resolve: { extensions: ['', '.coffee', '.js', '.scss'] }, module: { loaders: [ //... { test: /.scss$/, loaders: ["style", "css", "sass"] } ] } }; webpack.config.js
  • 31. CSS /uszanowanko/webpack> webpack --display-modules Hash: bdb3652f781ccb917057 Version: webpack 1.12.14 Time: 2366ms Asset Size Chunks Chunk Names 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 279 kB 1 [emitted] dog-bundle.js 2.12 kB 2 [emitted] dog [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [2] ../~/jquery/dist/jquery.js 259 kB {1} [built] [3] ./images/cat_head.png 82 bytes {1} [built] [4] ./cat/body.js 99 bytes {1} [built] [5] ./styles/cats_body.scss 1.06 kB {1} [built] [6] ../~/css-loader!../~/sass-loader!./styles/cats_body.scss 268 bytes {1} [built] [7] ../~/css-loader/lib/css-base.js 1.51 kB {1} [built] [8] ./images/cat_body.png 82 bytes {1} [built] [9] ../~/style-loader/addStyles.js 7.21 kB {1} [built] [10] ./dog/head.coffee 80 bytes {2} [built] [11] ./dog/body.coffee 80 bytes {2} [built]
  • 32. Test webpacka <html> <head> <meta charset="UTF-8"> <title>Cat</title> <script src="compiled/cat-bundle.js"></script> </head> <body> <div class="head"></div> <div class="body"></div> </body> </html> cat.html
  • 33. Test webpacka <html> <head> <meta charset="UTF-8"> <title>Cat</title> <script src="compiled/cat-bundle.js"></script> </head> <body> <div class="head"></div> <div class="body"></div> </body> </html> cat.html
  • 34. Test webpacka <html> <head> <meta charset="UTF-8"> <title>Cat</title> <script src="compiled/cat-bundle.js"></script> </head> <body> <div class="head"></div> <div class="body"></div> </body> </html> cat.html
  • 38. Krok trzeci Dodajemy dodatkowe wtyczki (plugins) var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { //... plugins: [ new ExtractTextPlugin("styles-[name].css", {allChunks:true}) ], module: { loaders: [ //... { test: /.scss$/, loader: ExtractTextPlugin.extract(["css", "sass"], {publicPath: ''}) } ] } }; webpack.config.js Wtyczki to moduły, które pozwalają na wykonanie dodatkowych czynności podczas działania skryptu webpacka. Mogą dodawać pliki, usuwać je lub ponownie przetwarzać.
  • 40. Ekstrakcja CSS /uszanowanko/webpack> webpack Hash: 1d336bd3e0dba1633bcc Version: webpack 1.12.12 Time: 749ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 268 kB 1 [emitted] dog-bundle.js 2.15 kB 2 [emitted] dog styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [4] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
  • 42. Wspólne fragmenty kodu uszanowanko = require('./common/uszanowanko'); uszanowanko(); //... uszanowanko = require('./common/uszanowanko'); uszanowanko(); //... assets/dog.js assets/cat.js $ = require('jquery'); wow = function(){ $('body').prepend('<h2>Uszanowanko, wow!</h2>'); }; module.exports = wow; assets/common/uszanowanko.js dog.jscat.js uszanowanko.js
  • 43. Wspólne fragmenty kodu var webpack = require('webpack'); module.exports = { //... plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js', chunks: ['dog', 'cat'] }), //... ] }; webpack.config.js
  • 45. Wspólne fragmenty kodu /uszanowanko/webpack> webpack Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
  • 46. Wspólne fragmenty kodu /uszanowanko/webpack> webpack Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules /uszanowanko/webpack> webpack Hash: 1d336bd3e0dba1633bcc Version: webpack 1.12.12 Time: 749ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 4.02 kB 0 [emitted] cat 1.1-bundle.js 268 kB 1 [emitted] dog-bundle.js 2.15 kB 2 [emitted] dog styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 151 bytes {0} [built] [0] ./dog.js 122 bytes {2} [built] [1] ./cat/head.js 224 bytes {1} [built] [4] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
  • 47. Wspólne fragmenty kodu /uszanowanko/webpack> webpack Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules
  • 48. Inne ciekawe wtyczki - UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików - DedupePlugin - wyszukuje zduplikowane pliki i je łączy - ProvidePlugin - automatycznie importuje moduły na podstawie zmiennych - CleanupPlugin - czyści folder na kompilowane pliki przed emisją nowych - AssetsPlugin - zrzuca do pliku JSON informacje o wyemitowanych plikach, które należy dołączyć do dokumentu HTML
  • 49. Inne ciekawe wtyczki - UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików - DedupePlugin - wyszukuje zduplikowane pliki i je łączy - ProvidePlugin - automatycznie importuje moduły na podstawie zmiennych - CleanupPlugin - czyści folder na kompilowane pliki przed emisją nowych - AssetsPlugin - zrzuca do pliku JSON informacje o wyemitowanych plikach, które należy dołączyć do dokumentu HTML { "cat": { "js": "compiled/cat-bundle.js", "css": "compiled/styles-cat.css" }, "dog": { "js": "compiled/dog-bundle.js" }, "common": { "js": "compiled/common.js" } }
  • 50. Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
  • 51. Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
  • 52. Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
  • 53. Krok ostatni Inne dodatki i ustawienia module.exports = { //... devtool: 'source-map' };
  • 55. Tryb watch /uszanowanko/webpack> webpack --watch --progress Hash: 644d6d78fe56c9b09505 Version: webpack 1.12.12 Time: 748ms Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] 5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted] cat-bundle.js 605 bytes 0 [emitted] cat 1.1-bundle.js 1.21 kB 1 [emitted] dog-bundle.js 879 bytes 2 [emitted] dog common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [ emitted] + 3 hidden modules
  • 56. Tryb watch common.js 271 kB 3 [emitted] common styles-cat.css 100 bytes 0 [emitted] cat [0] ./cat.js 225 bytes {0} [built] [0] ./dog.js 186 bytes {2} [built] [1] ./common/uszanowanko.js 128 bytes {3} [built] [3] ./cat/head.js 224 bytes {1} [built] [5] ./cat/body.js 99 bytes {1} [built] + 5 hidden modules Child extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules Hash: 23ce8cce5f54a398b346 Version: webpack 1.12.12 Time: 13ms Asset Size Chunks Chunk Names cat-bundle.js 620 bytes 0 [emitted] cat styles-cat.css 142 bytes 0 [emitted] cat cat-bundle.js.map 507 bytes 0 [emitted] cat styles-cat.css.map 91 bytes 0 [emitted] cat [0] ./cat.js 201 bytes {0} [built] + 9 hidden modules
  • 57. Serwer developerski npm install webpack-dev-server -g webpack-dev-server --content-base . // http://localhost:8080/cat.html
  • 58. Serwer developerski - autorealod // Poprzez iframe ---> // http://localhost:8080/webpack-dev-server/cat.html webpack-dev-server // Standardowe // http://localhost:8080/cat.html webpack-dev-server --inline
  • 59. Hot module reload webpack-dev-server --inline --hot if(module.hot) { module.hot.accept("./common/uszanowanko" , function() { var uszanowanko = require('./common/uszanowanko' ); var $ = require('jquery'); $('h2').remove(); uszanowanko(); }); }
  • 60. Podsumowanie Dlaczego chcesz używać webpacka? - Potrzebujesz skalowalności w projekcie - Masz duży projekt z dużą ilością wspólnych zależności - Chcesz łatwo skonfigurować transpilację - Lubisz porządek w zależnościach - Nie lubisz zmiennych globalnych A dlaczego nie chcesz? - Masz istniejący projekt, który będzie trzeba migrować - Bo naprawdę potrzebujesz task-runnera, a nie bundlera ;)