YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: Czym jest webpack i dlaczego chcesz go używać?

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

Marcin GajdaThe Software House

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

W telegraficznym skrócie

webpack przetwarza moduły i ich zależności i tworzy statyczne assety dla naszej aplikacji

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

Instalacja i uruchamianie

npm initsudo npm install webpack -g

webpack ./entry_point.js bundle.js# lub...webpack --config webpack.config.js

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

Instalacja i uruchamianie

npm initsudo npm install webpack -g

webpack ./entry_point.js bundle.js# lub...webpack --config webpack.config.js

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

Krok pierwszyWczytanie punktów wejściowych aplikacji

cat.js

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

Plik konfiguracyjnywebpack.config.js

module.exports = { context: __dirname+'/assets', entry: { cat: './cat.js' }, output: { path: 'compiled', filename: '[name]-bundle.js', publicPath: 'compiled/' }, module: {}, plugins: {}, resolve: {}};

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

Plik konfiguracyjnymodule.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

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

Krok drugiKompilacja skryptów, grafik, styli itd.

cat.js

head.js body.js

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

Krok drugiKompilacja skryptów, grafik, styli itd.

cat.js

head.js body.js

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

Importowanie statycznecatsHead = 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

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

Test importowania statycznego/uszanowanko/webpack> webpack --display-modules

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

Test importowania statycznego/uszanowanko/webpack> webpack --display-modulesHash: f7f0a8c9c6d85acfaf68Version: webpack 1.12.14Time: 57ms Asset Size Chunks Chunk Namescat-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>

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

Importowanie dynamicznerequire(['./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

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

Test importowania dynamicznego/uszanowanko/webpack> webpack --display-modules

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

Test importowania dynamicznego/uszanowanko/webpack> webpack --display-modulesHash: f7f0a8c9c6d85acfaf68Version: webpack 1.12.14Time: 57ms Asset Size Chunks Chunk Namescat-bundle.js 4.02 kB 0 [emitted] cat1.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>

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

Wiele “entry pointów”module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //...};

webpack.config.js

assets/cat.js → compiled/cat-bundle.jsassets/dog.js → compiled/dog-bundle.js

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

Wiele “entry pointów”module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //...};

webpack.config.js

assets/cat.js → compiled/cat-bundle.jsassets/dog.js → compiled/dog-bundle.js

dog.js

head.coffee body.coffee

cat.js

head.js body.js

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

Wiele “entry pointów”module.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //...};

webpack.config.js

assets/cat.js → compiled/cat-bundle.jsassets/dog.js → compiled/dog-bundle.js

dog.js

head.coffee body.coffee

cat.js

head.js body.js

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

Loaderymodule.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

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

Loaderymodule.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

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

TranspilacjadogsHead = 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

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

Transpilacja/uszanowanko/webpack> webpack --display-modules

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

Transpilacja/uszanowanko/webpack> webpack --display-modulesHash: 035ccd9c22a0de9b0c61Version: webpack 1.12.14Time: 115ms Asset Size Chunks Chunk Namescat-bundle.js 4.02 kB 0 [emitted] cat1.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]

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

Transpilacja/uszanowanko/webpack> webpack --display-modulesHash: 035ccd9c22a0de9b0c61Version: webpack 1.12.14Time: 115ms Asset Size Chunks Chunk Namescat-bundle.js 4.02 kB 0 [emitted] cat1.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]

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

Grafiki w skryptachvar $ = 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

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

Grafiki w skryptach/uszanowanko/webpack> webpack --display-modules

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

Grafiki w skryptach/uszanowanko/webpack> webpack --display-modulesHash: a2bd8c43ab5d095496beVersion: webpack 1.12.14Time: 342ms Asset Size Chunks Chunk Names5e8e95d00a8673e044ce5ae85a86d22f.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]

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

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

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

CSS

module.exports = { //... resolve: { extensions: ['', '.coffee', '.js', '.scss'] }, module: { loaders: [ //... { test: /\.scss$/, loaders: ["style", "css", "sass"] } ] }};

webpack.config.js

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

CSS/uszanowanko/webpack> webpack --display-modules

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

CSS/uszanowanko/webpack> webpack --display-modulesHash: bdb3652f781ccb917057Version: webpack 1.12.14Time: 2366ms Asset Size Chunks Chunk Names5e8e95d00a8673e044ce5ae85a86d22f.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]

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

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

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

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

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

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

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

Test webpacka

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

Test webpacka

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

Test webpacka

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

Krok trzeciDodajemy 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ć.

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

Ekstrakcja CSS/uszanowanko/webpack> webpack

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

Ekstrakcja CSS/uszanowanko/webpack> webpackHash: 1d336bd3e0dba1633bccVersion: webpack 1.12.12Time: 749ms Asset Size Chunks Chunk Names44402ef52711a576ca7d32819295f64e.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

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

Wspólne fragmenty kodu

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

Wspólne fragmenty koduuszanowanko = 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

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

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

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

Wspólne fragmenty kodu/uszanowanko/webpack> webpack

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

Wspólne fragmenty kodu/uszanowanko/webpack> webpackHash: 644d6d78fe56c9b09505Version: webpack 1.12.12Time: 748ms Asset Size Chunks Chunk Names44402ef52711a576ca7d32819295f64e.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 modulesChild extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules

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

Wspólne fragmenty kodu/uszanowanko/webpack> webpackHash: 644d6d78fe56c9b09505Version: webpack 1.12.12Time: 748ms Asset Size Chunks Chunk Names44402ef52711a576ca7d32819295f64e.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 modulesChild extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules

/uszanowanko/webpack> webpackHash: 1d336bd3e0dba1633bccVersion: webpack 1.12.12Time: 749ms Asset Size Chunks Chunk Names44402ef52711a576ca7d32819295f64e.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

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

Wspólne fragmenty kodu/uszanowanko/webpack> webpackHash: 644d6d78fe56c9b09505Version: webpack 1.12.12Time: 748ms Asset Size Chunks Chunk Names44402ef52711a576ca7d32819295f64e.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 modulesChild extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modules

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

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

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

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" }}

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

Krok ostatniInne dodatki i ustawienia

module.exports = { //... devtool: 'source-map'};

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

Krok ostatniInne dodatki i ustawienia

module.exports = { //... devtool: 'source-map'};

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

Krok ostatniInne dodatki i ustawienia

module.exports = { //... devtool: 'source-map'};

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

Krok ostatniInne dodatki i ustawienia

module.exports = { //... devtool: 'source-map'};

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

Tryb watch/uszanowanko/webpack> webpack --watch --progress

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

Tryb watch/uszanowanko/webpack> webpack --watch --progressHash: 644d6d78fe56c9b09505Version: webpack 1.12.12Time: 748ms Asset Size Chunks Chunk Names44402ef52711a576ca7d32819295f64e.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 modulesChild extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [ emitted] + 3 hidden modules

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

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 modulesChild extract-text-webpack-plugin: Asset Size Chunks Chunk Names 44402ef52711a576ca7d32819295f64e.png 188 kB [emitted] + 3 hidden modulesHash: 23ce8cce5f54a398b346Version: webpack 1.12.12Time: 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] catstyles-cat.css.map 91 bytes 0 [emitted] cat [0] ./cat.js 201 bytes {0} [built] + 9 hidden modules

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

Serwer developerski

npm install webpack-dev-server -g

webpack-dev-server --content-base .// http://localhost:8080/cat.html

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

Serwer developerski - autorealod

// Poprzez iframe --->// http://localhost:8080/webpack-dev-server/cat.htmlwebpack-dev-server

// Standardowe// http://localhost:8080/cat.htmlwebpack-dev-server --inline

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

Hot module reloadwebpack-dev-server --inline --hot

if(module.hot) { module.hot.accept("./common/uszanowanko" , function() { var uszanowanko = require('./common/uszanowanko' ); var $ = require('jquery'); $('h2').remove(); uszanowanko(); });}

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

PodsumowanieDlaczego 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 ;)

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

Kod z prezentacji

https://github.com/marcingajda/uszanowanko-webpack

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

Pytania?

@marcingajda91


Related Documents