Webpack slides
33
The new rock star of build tools Webpack Andrii Vandakurov
Transcript of Webpack slides
The new rock star of build tools
Webpack
Andrii Vandakurov
Hi, I’m Andrii Vandakurov
Senior Frontend developer at
We create cool thingsAndrii 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 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
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
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
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>
Modularitymodule1.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 splittingwebpack.config.js module1.js
Webpack loaders 60+
ES6
ESLint
JSCS
MochaKarma React
Riot
Polymer
Vue
Plugins
Andrii Vandakurov
code -> loaders -> plugins -> output
CommonChunkPlugin
Andrii Vandakurov
smart common chunks extraction
Chunk1.jsChunk2.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
DefinePlugininjects 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
ProvidePluginPrevent 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.json2. go to http://goo.gl/b0kzNZ3. Check your dependencies graph
Andrii VandakurovAndrii Vandakurov
QA ?
Andrii Vandakurov
Links
Andrii Vandakurov
1. Webpack official site2. Examples
Inspired by ● Алексадр Ткаленко slides● Alexandrine Boissière slides
Andrii Vandakurov
