webpack - czym jest webpack i dlaczego chcesz go używać? - wersja krótka

webpackczym jest i dlaczego chcesz go używać

Marcin GajdaThe Software House

W skrócie

webpack przetwarza moduły i ich zależności 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

Plik konfiguracyjnywebpack.config.js

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

assets/user.js → compiled/user-bundle.js

var userProfile = require('./user/profile.js');var userContacts = require('./user/contacts.js');

userProfile.doSomething();userContacts.doMore();

assets/user.js

Importowanie statyczne

var userProfile = { doSomething: function(){ return 'hello' }}module.exports = userProfile;

assets/user/profile.js

/meet_js/webpack> webpack --display-modules


/meet_js/webpack> webpack --display-modulesHash: f7f0a8c9c6d85acfaf68Version: webpack 1.12.14Time: 57ms Asset Size Chunks Chunk Namesuser-bundle.js 2.05 kB 0 [emitted] user [0] ./user.js 122 bytes {0} [built] [1] ./user/profile.js 66 bytes {0} [built] [2] ./user/contacts.js 66 bytes {0} [built]

/meet_js/webpack>


Importowanie dynamiczne

require(['./user/profile.js, './user/contacts.js'], function(userProfile, userContacts){

userProfile.doSomething(); userContacts.doMore();

});

var userProfile = { doSomething: function(){ return 'hello' }}module.exports = userProfile;

assets/user/profile.js

assets/user.js

Importowanie dynamiczne/meet_js/webpack> webpack --display-modules

Importowanie dynamiczne/meet_js/webpack> webpack --display-modulesHash: f7f0a8c9c6d85acfaf68Version: webpack 1.12.14Time: 57ms Asset Size Chunks Chunk Namesuser-bundle.js 4.02 kB 0 [emitted] user1.1-bundle.js 434 kB 1 [emitted] [0] ./user.js 151 bytes {0} [built] [1] ./user/profile.js 66 bytes {1} [built] [2] ./user/contacts.js 66 bytes {1} [built]

/meet_js/webpack>

Wiele “entry pointów”module.exports = { //... entry: { user: './user', admin: './admin' //coffeescript! }, output: { //... }, resolve: { extensions: ['', '.js', '.coffee', '.ts'] } module: {}, plugins: {},};

webpack.config.js

assets/user.js → compiled/user-bundle.jsassets/admin.coffee → compiled/admin-bundle.js

Loaderymodule.exports = { //... 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

adminUsers = require('./admin/users')adminSettings = require('./user/settings')

adminUsers.doSomething()adminSettings.doMore()

assets/admin.coffee

adminUsers = -> doSomething: -> 'hello'

module.exports = adminUsers

assets/admin/users.coffee

Loadery

Loadery/meet_js/webpack> webpack --display-modules

Loadery/meet_js/webpack> webpack --display-modulesHash: 035ccd9c22a0de9b0c61Version: webpack 1.12.14Time: 115ms Asset Size Chunks Chunk Namesuser-bundle.js 4.02 kB 0 [emitted] user1.1-bundle.js 434 bytes 1 [emitted]admin-bundle.js 2.13 kB 2 [emitted] admin [0] ./user.js 151 bytes {0} [built] [0] ./admin.js 122 bytes {2} [built] [1] ./user/profile.js 66 bytes {1} [built] [2] ./user/contacts.js 66 bytes {1} [built] [3] ./admin/users.coffee 80 bytes {2} [built] [4] ./admin/settings.coffee 80 bytes {2} [built]

Importowanie grafik i innych assetówvar defaultAvatar = require('../images/avatar.png');

//...var avatar = user.avatar || defaultAvatar;

module.exports = { //... module: { loaders: [ { test: /\.coffee$/, loader: "coffee-loader" }, { test: /\.(png|jpg|gif|bmp)/, loader: "file" } ] }};

require('../styles/theme');//...

assets/user.js

Importowanie CSS

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

webpack.config.js

Importowanie CSS

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

Wspólne fragmenty kodu

var webpack = require('webpack');

module.exports = { //... plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js', chunks: ['user', 'admin'] }), //... ]};

webpack.config.js

Inne przydatne wtyczki- UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików- DefinePlugin - dorzuca stałe do naszego JavaScript- 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 przydatne wtyczki- UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików- DefinePlugin - dorzuca stałe do naszego JavaScript- 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{ "user": { "js": "compiled/user-bundle.js", "css": "compiled/styles-user.css" }, "admin": { "js": "compiled/admin-bundle.js" }, "common": { "js": "compiled/common.js" }}

Sourcemapy

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

Serwer developerski

npm install webpack-dev-server -g

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

// Autoreload przez iframe// http://localhost:8080/webpack-dev-server/webpack-dev-server

// Standardowy autoreload// http://localhost:8080/webpack-dev-server --inline

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

if(module.hot) { module.hot.accept("./some/module", function() {

var lib = require('./some/module); lib.removeFromWebsite(); lib.addToWebsite();

});}

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

Pytania?

@marcingajda91