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