Top Banner

Click here to load reader

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

Jan 10, 2017

ReportDownload

Software

  • Czym jest webpack i dlaczego chcesz go uywa?

    Marcin GajdaThe Software House

  • W telegraficznym skrcie

    webpack przetwarza moduy i ich zalenoci i tworzy statyczne assety dla naszej aplikacji

  • Instalacja i uruchamianie

    npm initsudo npm install webpack -g

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

  • Instalacja i uruchamianie

    npm initsudo npm install webpack -g

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

  • Krok pierwszyWczytanie punktw wejciowych aplikacji

    cat.js

  • 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: {}};

  • 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

  • Krok drugiKompilacja skryptw, grafik, styli itd.

    cat.js

    head.js body.js

  • Krok drugiKompilacja skryptw, grafik, styli itd.

    cat.js

    head.js body.js

  • 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

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

  • 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>

  • 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

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

  • 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>

  • Wiele entry pointwmodule.exports = { //... entry: { cat: './cat.js', dog: './dog.js' }, //...};

    webpack.config.js

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

  • Wiele entry pointwmodule.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

  • Wiele entry pointwmodule.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

  • Loaderymodule.exports = { //... resolve: { extensions: ['', '.coffee', '.js'] }, module: { loaders: [ { test: /\.coffee$/, loader: 'coffee-loader' } ] }};

    webpack.config.js

    Loadery to mae moduy, ktre przetwarzaj wskazane im pliki i zwracaj je w formie, ktra moe zosta zapisana lub ulec dalszemu przetwarzaniu przez nastpne loadery.

    npm install coffee-script coffee-loader --save

  • Loaderymodule.exports = { //... resolve: { extensions: ['', '.coffee', '.js'] }, module: { loaders: [ { test: /\.coffee$/, loader: 'coffee-loader' } ] }};

    webpack.config.js

    Loadery to mae moduy, ktre przetwarzaj wskazane im pliki i zwracaj je w formie, ktra moe zosta zapisana lub ulec dalszemu przetwarzaniu przez nastpne loadery.

    npm install coffee-script coffee-loader --save

  • 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

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

  • 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]

  • 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]

  • Grafiki w skryptachvar $ = require('jquery');var catHeadImage = require('../images/cat_head.png');

    $('.head').append('');//...

    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-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]

  • 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-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]

  • Test webpacka

    Cat

    cat.html

  • Test webpacka

    Cat

    cat.html

  • Test webpacka

    Cat

    cat.html

  • Test webpacka

  • Test webpacka