webpack slides
TRANSCRIPT
![Page 1: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/1.jpg)
The new rock star of build tools
Webpack
Andrii Vandakurov
![Page 2: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/2.jpg)
Hi, I’m Andrii Vandakurov
Senior Frontend developer at
We create cool thingsAndrii Vandakurov
![Page 3: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/3.jpg)
What is the base of every project ?
Assets !
Andrii Vandakurov
![Page 4: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/4.jpg)
Of course you can manage this by yourself
Andrii Vandakurov
![Page 5: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/5.jpg)
But why ? There are lot of tools that can help you !
Andrii Vandakurov
![Page 6: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/6.jpg)
Diving into webpack
Andrii Vandakurov
![Page 7: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/7.jpg)
Webpack suits well for really big projects
because of it’s flexibility ( support for AMD, CommonJs, UMD modules ) Andrii Vandakurov
![Page 8: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/8.jpg)
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) { … });
![Page 9: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/9.jpg)
Webpack Configyou 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
![Page 10: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/10.jpg)
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
![Page 11: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/11.jpg)
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
![Page 12: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/12.jpg)
Code splitting
Andrii Vandakurov
Modules to chunks+ get only what you need+ less requests, less overhead
![Page 13: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/13.jpg)
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
![Page 14: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/14.jpg)
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
![Page 15: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/15.jpg)
What about other files??
.css .png .jsx .woff .svg .json .styl .eot .html .scss .jpeg .jade ...
Andrii VandakurovAndrii Vandakurov
![Page 16: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/16.jpg)
LoadersLoaders 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
![Page 17: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/17.jpg)
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”);
![Page 18: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/18.jpg)
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
![Page 19: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/19.jpg)
<!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>
Modularitymodule1.js
require("module1.scss");console.log("module1 js code");
module3.js
require("module3.scss");console.log("module3 js code");
Andrii Vandakurov
![Page 20: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/20.jpg)
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 splittingwebpack.config.js module1.js
![Page 21: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/21.jpg)
Webpack loaders 60+
ES6
ESLint
JSCS
MochaKarma React
Riot
Polymer
Vue
![Page 22: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/22.jpg)
Plugins
Andrii Vandakurov
code -> loaders -> plugins -> output
![Page 23: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/23.jpg)
CommonChunkPlugin
Andrii Vandakurov
smart common chunks extraction
Chunk1.jsChunk2.js
Chunk3.js
common.chunk.js
![Page 24: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/24.jpg)
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
![Page 25: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/25.jpg)
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
DefinePlugininjects free variables into your code without using global scope
webpack.config.js
![Page 26: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/26.jpg)
var webpack = require("webpack");module.exports = { … plugins: [ new webpack.ProvidePlugin({ "React": "react" }) ]};
Somewhere in your code:
module.export = React.createClass({...})
Andrii Vandakurov
ProvidePluginPrevent from ‘require’ module in each file
![Page 27: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/27.jpg)
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
![Page 28: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/28.jpg)
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
![Page 29: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/29.jpg)
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.
![Page 30: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/30.jpg)
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.
![Page 31: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/31.jpg)
Dependencies visualization
1. webpack --json > stats.json2. go to http://goo.gl/b0kzNZ3. Check your dependencies graph
Andrii VandakurovAndrii Vandakurov
![Page 32: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/32.jpg)
QA ?
Andrii Vandakurov
![Page 33: Webpack slides](https://reader034.vdocuments.net/reader034/viewer/2022052210/587507fb1a28ab29208b6803/html5/thumbnails/33.jpg)
Links
Andrii Vandakurov
1. Webpack official site2. Examples
Inspired by ● Алексадр Ткаленко slides● Alexandrine Boissière slides
Andrii Vandakurov