SlideShare a Scribd company logo
1 of 33
Download to read offline
The new rock star of build tools
Webpack
Andrii Vandakurov
Hi, I’m Andrii Vandakurov
Senior Frontend developer at
We create cool things
Andrii Vandakurov
What is the base of every project ?
Assets !
Andrii Vandakurov
Of course
you can
manage this
by yourself
Andrii Vandakurov
But why ? There are lot of tools
that can help you !
Andrii Vandakurov
Diving into webpack
Andrii Vandakurov
Webpack suits well for
really big projects
because of it’s flexibility ( support for AMD, CommonJs, UMD modules ) Andrii Vandakurov
Installation and use
Andrii Vandakurov
npm install webpack
Could be runned from CLI:
Install as npm package:
webpack <entry.js> <result.js>
or as Node.js package from script:
var webpack = require("webpack");
webpack({ //configuration... }, function(err, stats) { … });
Webpack Config
you don’t need to write pure JSON
into the configuration. Use any
JavaScript you want. It’s just a
node.js (CommonJs) module…
Andrii VandakurovAndrii Vandakurov
What is CommonJs module ?
Each file has
isolated scope
Andrii Vandakurov
* so we need to module.export
everything we want to be public
module.export = 2;
File1.js
var two = require(“./File1.js”);
console.log(2 + two); // 4
File2.js
Code splitting
Andrii Vandakurov
All in one request
+ one request, less latency
- get all bunch
Request per module
+ get only what you need
- many requests => much overhead
- requests latency
Code splitting
Andrii Vandakurov
Modules to chunks
+ get only what you need
+ less requests, less overhead
But let check
how webpack
can help us with
simple example
project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="module1.css">
<link rel="stylesheet" href="module2.css">
<link rel="stylesheet" href="module3.css">
</head>
<body>
Hello world
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="module3.js"></script>
</body>
</html>
Andrii Vandakurov
module.exports = {
entry: {
app: [
"./app/js/module1",
"./app/js/module2"
]
},
output: {
path: "./public/js/",
filename: "bundle.js"
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="module1.css">
<link rel="stylesheet" href="module2.css">
<link rel="stylesheet" href="module3.css">
</head>
<body>
Hello world
<script src="bundle.js"></script>
<script src="module3.js"></script>
</body>
</html>
Andrii Vandakurov
webpack.config.js
What about
other files??
.css .png .jsx .woff .svg .
json .styl .eot .html .scss .
jpeg .jade ...
Andrii VandakurovAndrii Vandakurov
Loaders
Loaders allow you to preprocess files
as you require() or “load” them.
Loaders are kind of like “tasks” are in
other build tools
code -> loaders -> plugins -> output
Andrii Vandakurov
Continue with styles
module.exports = {
...
module: {
loaders: [
{ test: /.scss$/, loader: "style!css!autoprefixer!sass" }
]}
};
npm install style-loader css-loader sass-loader autoprefixer-loader
Andrii Vandakurov
require(“style!css!autoprefixer!sass!./mystyles.scss”);
Andrii Vandakurov
Optimize workflow with
images !
npm install url-loader
require("url?limit=10000!./file.png");
Insert image in the bundle (via Base64) if it’s
smaller than 10kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Hello world
<script src="bundle.js"></script>
<script src="module3.js"></script>
</body>
</html>
Modularity
module1.js
require("module1.scss");
console.log("module1 js code");
module3.js
require("module3.scss");
console.log("module3 js code");
Andrii Vandakurov
module.exports = {
...
entry: {
app: "./app/js/module1"
},
...
};
document
.querySelector(".btn-require-module")
.addEventListener("click", function(){
require.ensure(["./module3"], function(require){
var module3 = require("./module3");
}, "module3")
})
Andrii Vandakurov
Code splitting
webpack.config.js module1.js
Webpack
loaders
60+
ES6
ESLint
JSCS
Mocha
Karma React
Riot
Polymer
Vue
Plugins
Andrii Vandakurov
code -> loaders -> plugins -> output
CommonChunkPlugin
Andrii Vandakurov
smart common chunks extraction
Chunk1.js
Chunk2.js
Chunk3.js
common.chunk.js
var webpack = require("webpack");
module.exports = {
...
plugins: [
new webpack.optimize.CommonsChunkPlugin("commons", "commons.js")
]
};
require(“./module4”)
console.log(“This is module 1”);
Andrii Vandakurov
module1.js
require(“./module4”)
console.log(“This is module 3”);
module3.js
CommonChunkPlugin
var webpack = require("webpack");
module.exports = {
…
plugins: [
new webpack.DefinePlugin({
ENV: JSON.stringify("dev")
})
]
};
Somewhere in your code:
if(ENV === "dev"){
console.log("Its dev");
}else{
console.log("Its NOT dev");
}
Andrii Vandakurov
DefinePlugin
injects free variables into your code without using global scope
webpack.config.js
var webpack = require("webpack");
module.exports = {
…
plugins: [
new webpack.ProvidePlugin({
"React": "react"
})
]
};
Somewhere in your code:
module.export = React.createClass({
...
})
Andrii Vandakurov
ProvidePlugin
Prevent from ‘require’ module in each file
ExtractTextPlugin
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
…
plugins: [
new ExtractTextPlugin("module1.scss", "[name].[contenthash].css")
]
};
Andrii Vandakurov
extract styles from bundle
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { …
plugins: [
new HtmlWebpackPlugin({
title: "Webpack",
"filename": "../index.html",
"inject": true,
"template": "app/index.html",
"chunks": ["commons", "module1"]
})
]
};
Andrii Vandakurov
Simplifies creation of
HTML files to serve
your webpack
bundles
HtmlWebpackPlugin
DevServer
Andrii Vandakurov
Express.js (NodeJs) server which has a little
runtime which is connected to the server via
Socket.IO. The server emits information about
the compilation state to the client, which reacts
to those events.
Andrii Vandakurov
exchanges, adds, or removes modules while
an application is running without a page
reload.
Hot Module
Replacement
It’s like LiveReload for every module.
Dependencies
visualization
1. webpack --json > stats.json
2. go to http://goo.gl/b0kzNZ
3. Check your dependencies graph
Andrii VandakurovAndrii Vandakurov
QA ?
Andrii Vandakurov
Links
Andrii Vandakurov
1. Webpack official site
2. Examples
Inspired by
● Алексадр Ткаленко slides
● Alexandrine Boissière slides
Andrii Vandakurov

More Related Content

What's hot

Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass SlidesNir Kaufman
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with SpringJoshua Long
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentationBojan Golubović
 
Introduction for Master Class "Amazing Reactive Forms"
Introduction for Master Class "Amazing Reactive Forms"Introduction for Master Class "Amazing Reactive Forms"
Introduction for Master Class "Amazing Reactive Forms"Fabio Biondi
 
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSRafael Casuso Romate
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js ExpressEyal Vardi
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
Node Architecture and Getting Started with Express
Node Architecture and Getting Started with ExpressNode Architecture and Getting Started with Express
Node Architecture and Getting Started with Expressjguerrero999
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with JestMichał Pierzchała
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentationThanh Tuong
 

What's hot (20)

Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
 
Nestjs MasterClass Slides
Nestjs MasterClass SlidesNestjs MasterClass Slides
Nestjs MasterClass Slides
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with Spring
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
Introduction for Master Class "Amazing Reactive Forms"
Introduction for Master Class "Amazing Reactive Forms"Introduction for Master Class "Amazing Reactive Forms"
Introduction for Master Class "Amazing Reactive Forms"
 
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJS
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
angular fundamentals.pdf
angular fundamentals.pdfangular fundamentals.pdf
angular fundamentals.pdf
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Node Architecture and Getting Started with Express
Node Architecture and Getting Started with ExpressNode Architecture and Getting Started with Express
Node Architecture and Getting Started with Express
 
React JS part 1
React JS part 1React JS part 1
React JS part 1
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with Jest
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
 
react redux.pdf
react redux.pdfreact redux.pdf
react redux.pdf
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
React and redux
React and reduxReact and redux
React and redux
 
React js
React jsReact js
React js
 
React + Redux for Web Developers
React + Redux for Web DevelopersReact + Redux for Web Developers
React + Redux for Web Developers
 

Similar to Webpack slides

WEBPACK
WEBPACKWEBPACK
WEBPACKhome
 
Lightweight Developer Provisioning with Gradle
Lightweight Developer Provisioning with GradleLightweight Developer Provisioning with Gradle
Lightweight Developer Provisioning with GradleMario-Leander Reimer
 
Lightweight developer provisioning with gradle and seu as-code
Lightweight developer provisioning with gradle and seu as-codeLightweight developer provisioning with gradle and seu as-code
Lightweight developer provisioning with gradle and seu as-codeQAware GmbH
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!David Gibbons
 
Shopware PWA - a technical overview of
Shopware PWA - a technical overview ofShopware PWA - a technical overview of
Shopware PWA - a technical overview ofSander Mangel
 
Get MEAN! Node.js and the MEAN stack
Get MEAN!  Node.js and the MEAN stackGet MEAN!  Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stackNicholas McClay
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpMatthew Davis
 
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Alain Hippolyte
 
Hybrid app development frameworks
Hybrid app development frameworksHybrid app development frameworks
Hybrid app development frameworksSquash Apps Pvt Ltd
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - IntroductionWebStackAcademy
 
EnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend CodeEnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend CodeMarcel Birkner
 
JavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and FutureJavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and FutureIgalia
 
Node.js Crash Course
Node.js Crash CourseNode.js Crash Course
Node.js Crash CourseDavid Neal
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginnersrajkamaltibacademy
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreEngineor
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...tdc-globalcode
 

Similar to Webpack slides (20)

WEBPACK
WEBPACKWEBPACK
WEBPACK
 
Lightweight Developer Provisioning with Gradle
Lightweight Developer Provisioning with GradleLightweight Developer Provisioning with Gradle
Lightweight Developer Provisioning with Gradle
 
Lightweight developer provisioning with gradle and seu as-code
Lightweight developer provisioning with gradle and seu as-codeLightweight developer provisioning with gradle and seu as-code
Lightweight developer provisioning with gradle and seu as-code
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack
 
How to Webpack your Django!
How to Webpack your Django!How to Webpack your Django!
How to Webpack your Django!
 
Shopware PWA - a technical overview of
Shopware PWA - a technical overview ofShopware PWA - a technical overview of
Shopware PWA - a technical overview of
 
Get MEAN! Node.js and the MEAN stack
Get MEAN!  Node.js and the MEAN stackGet MEAN!  Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
 
Always on! Or not?
Always on! Or not?Always on! Or not?
Always on! Or not?
 
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
 
Hybrid app development frameworks
Hybrid app development frameworksHybrid app development frameworks
Hybrid app development frameworks
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 
EnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend CodeEnterJS 2015 - Continuous Integration for Frontend Code
EnterJS 2015 - Continuous Integration for Frontend Code
 
JavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and FutureJavaScript Modules Past, Present and Future
JavaScript Modules Past, Present and Future
 
Node.js Crash Course
Node.js Crash CourseNode.js Crash Course
Node.js Crash Course
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginners
 
B875.pptx
B875.pptxB875.pptx
B875.pptx
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack Encore
 
Why NodeJS
Why NodeJSWhy NodeJS
Why NodeJS
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 

More from Андрей Вандакуров (7)

Lviv js2017 (eleks)
Lviv js2017 (eleks)Lviv js2017 (eleks)
Lviv js2017 (eleks)
 
Rare frontend testing
Rare frontend testingRare frontend testing
Rare frontend testing
 
Opensourceman ( url for slides with animations https://goo.gl/R638tW )
Opensourceman ( url for slides with animations https://goo.gl/R638tW )Opensourceman ( url for slides with animations https://goo.gl/R638tW )
Opensourceman ( url for slides with animations https://goo.gl/R638tW )
 
Pivorak.javascript.global domination
Pivorak.javascript.global dominationPivorak.javascript.global domination
Pivorak.javascript.global domination
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
 
Design and Code. Work should be fun.
Design and Code. Work should be fun.Design and Code. Work should be fun.
Design and Code. Work should be fun.
 
Kharkivjs javascript debugging. know your enemy
Kharkivjs   javascript debugging. know your enemyKharkivjs   javascript debugging. know your enemy
Kharkivjs javascript debugging. know your enemy
 

Recently uploaded

GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jNeo4j
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorTier1 app
 
Business Analyzopedia - Your Pocket Gita for Business Analysis
Business Analyzopedia - Your Pocket Gita for Business AnalysisBusiness Analyzopedia - Your Pocket Gita for Business Analysis
Business Analyzopedia - Your Pocket Gita for Business AnalysisDEEPRAJ PATHAK
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdfAndrey Devyatkin
 
Santander Stream Processing with Apache Flink
Santander Stream Processing with Apache FlinkSantander Stream Processing with Apache Flink
Santander Stream Processing with Apache Flinkconfluent
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...OnePlan Solutions
 
OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024OpenMetadata
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfmaor17
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfRTS corp
 
What is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docxWhat is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docxTechnogeeks
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfkalichargn70th171
 
logical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptxlogical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptxRemote DBA Services
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxSasikiranMarri
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesVictoriaMetrics
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...kalichargn70th171
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolsosttopstonverter
 

Recently uploaded (20)

GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4jGraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
GraphSummit Madrid - Product Vision and Roadmap - Luis Salvador Neo4j
 
Effectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryErrorEffectively Troubleshoot 9 Types of OutOfMemoryError
Effectively Troubleshoot 9 Types of OutOfMemoryError
 
Business Analyzopedia - Your Pocket Gita for Business Analysis
Business Analyzopedia - Your Pocket Gita for Business AnalysisBusiness Analyzopedia - Your Pocket Gita for Business Analysis
Business Analyzopedia - Your Pocket Gita for Business Analysis
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
 
Santander Stream Processing with Apache Flink
Santander Stream Processing with Apache FlinkSantander Stream Processing with Apache Flink
Santander Stream Processing with Apache Flink
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
 
OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024OpenMetadata Community Meeting - 4th April, 2024
OpenMetadata Community Meeting - 4th April, 2024
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdf
 
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdfEnhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
Enhancing Supply Chain Visibility with Cargo Cloud Solutions.pdf
 
What is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docxWhat is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docx
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
 
logical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptxlogical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptx
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
 
What’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 UpdatesWhat’s New in VictoriaMetrics: Q1 2024 Updates
What’s New in VictoriaMetrics: Q1 2024 Updates
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
 
eSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration toolseSoftTools IMAP Backup Software and migration tools
eSoftTools IMAP Backup Software and migration tools
 

Webpack slides

  • 1. The new rock star of build tools Webpack Andrii Vandakurov
  • 2. Hi, I’m Andrii Vandakurov Senior Frontend developer at We create cool things Andrii Vandakurov
  • 3. What is the base of every project ? Assets ! Andrii Vandakurov
  • 4. Of course you can manage this by yourself Andrii Vandakurov
  • 5. But why ? There are lot of tools that can help you ! Andrii Vandakurov
  • 7. Webpack suits well for really big projects because of it’s flexibility ( support for AMD, CommonJs, UMD modules ) Andrii Vandakurov
  • 8. Installation and use Andrii Vandakurov npm install webpack Could be runned from CLI: Install as npm package: webpack <entry.js> <result.js> or as Node.js package from script: var webpack = require("webpack"); webpack({ //configuration... }, function(err, stats) { … });
  • 9. Webpack Config you don’t need to write pure JSON into the configuration. Use any JavaScript you want. It’s just a node.js (CommonJs) module… Andrii VandakurovAndrii Vandakurov
  • 10. What is CommonJs module ? Each file has isolated scope Andrii Vandakurov * so we need to module.export everything we want to be public module.export = 2; File1.js var two = require(“./File1.js”); console.log(2 + two); // 4 File2.js
  • 11. Code splitting Andrii Vandakurov All in one request + one request, less latency - get all bunch Request per module + get only what you need - many requests => much overhead - requests latency
  • 12. Code splitting Andrii Vandakurov Modules to chunks + get only what you need + less requests, less overhead
  • 13. But let check how webpack can help us with simple example project <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="module1.css"> <link rel="stylesheet" href="module2.css"> <link rel="stylesheet" href="module3.css"> </head> <body> Hello world <script src="module1.js"></script> <script src="module2.js"></script> <script src="module3.js"></script> </body> </html> Andrii Vandakurov
  • 14. module.exports = { entry: { app: [ "./app/js/module1", "./app/js/module2" ] }, output: { path: "./public/js/", filename: "bundle.js" } }; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="module1.css"> <link rel="stylesheet" href="module2.css"> <link rel="stylesheet" href="module3.css"> </head> <body> Hello world <script src="bundle.js"></script> <script src="module3.js"></script> </body> </html> Andrii Vandakurov webpack.config.js
  • 15. What about other files?? .css .png .jsx .woff .svg . json .styl .eot .html .scss . jpeg .jade ... Andrii VandakurovAndrii Vandakurov
  • 16. Loaders Loaders allow you to preprocess files as you require() or “load” them. Loaders are kind of like “tasks” are in other build tools code -> loaders -> plugins -> output Andrii Vandakurov
  • 17. Continue with styles module.exports = { ... module: { loaders: [ { test: /.scss$/, loader: "style!css!autoprefixer!sass" } ]} }; npm install style-loader css-loader sass-loader autoprefixer-loader Andrii Vandakurov require(“style!css!autoprefixer!sass!./mystyles.scss”);
  • 18. Andrii Vandakurov Optimize workflow with images ! npm install url-loader require("url?limit=10000!./file.png"); Insert image in the bundle (via Base64) if it’s smaller than 10kb
  • 19. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> Hello world <script src="bundle.js"></script> <script src="module3.js"></script> </body> </html> Modularity module1.js require("module1.scss"); console.log("module1 js code"); module3.js require("module3.scss"); console.log("module3 js code"); Andrii Vandakurov
  • 20. module.exports = { ... entry: { app: "./app/js/module1" }, ... }; document .querySelector(".btn-require-module") .addEventListener("click", function(){ require.ensure(["./module3"], function(require){ var module3 = require("./module3"); }, "module3") }) Andrii Vandakurov Code splitting webpack.config.js module1.js
  • 22. Plugins Andrii Vandakurov code -> loaders -> plugins -> output
  • 23. CommonChunkPlugin Andrii Vandakurov smart common chunks extraction Chunk1.js Chunk2.js Chunk3.js common.chunk.js
  • 24. var webpack = require("webpack"); module.exports = { ... plugins: [ new webpack.optimize.CommonsChunkPlugin("commons", "commons.js") ] }; require(“./module4”) console.log(“This is module 1”); Andrii Vandakurov module1.js require(“./module4”) console.log(“This is module 3”); module3.js CommonChunkPlugin
  • 25. var webpack = require("webpack"); module.exports = { … plugins: [ new webpack.DefinePlugin({ ENV: JSON.stringify("dev") }) ] }; Somewhere in your code: if(ENV === "dev"){ console.log("Its dev"); }else{ console.log("Its NOT dev"); } Andrii Vandakurov DefinePlugin injects free variables into your code without using global scope webpack.config.js
  • 26. var webpack = require("webpack"); module.exports = { … plugins: [ new webpack.ProvidePlugin({ "React": "react" }) ] }; Somewhere in your code: module.export = React.createClass({ ... }) Andrii Vandakurov ProvidePlugin Prevent from ‘require’ module in each file
  • 27. ExtractTextPlugin var webpack = require("webpack"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { … plugins: [ new ExtractTextPlugin("module1.scss", "[name].[contenthash].css") ] }; Andrii Vandakurov extract styles from bundle
  • 28. var webpack = require("webpack"); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { … plugins: [ new HtmlWebpackPlugin({ title: "Webpack", "filename": "../index.html", "inject": true, "template": "app/index.html", "chunks": ["commons", "module1"] }) ] }; Andrii Vandakurov Simplifies creation of HTML files to serve your webpack bundles HtmlWebpackPlugin
  • 29. DevServer Andrii Vandakurov Express.js (NodeJs) server which has a little runtime which is connected to the server via Socket.IO. The server emits information about the compilation state to the client, which reacts to those events.
  • 30. Andrii Vandakurov exchanges, adds, or removes modules while an application is running without a page reload. Hot Module Replacement It’s like LiveReload for every module.
  • 31. Dependencies visualization 1. webpack --json > stats.json 2. go to http://goo.gl/b0kzNZ 3. Check your dependencies graph Andrii VandakurovAndrii Vandakurov
  • 33. Links Andrii Vandakurov 1. Webpack official site 2. Examples Inspired by ● Алексадр Ткаленко slides ● Alexandrine Boissière slides Andrii Vandakurov