Webpack Tutorial, Uppsala JS

WHAT IS WEBPACK

and how does it work?

A TUTORIAL

github.com/emiloberg

twitter.com/emiloberg

monator.com

HELLO I'M EMIL ÖBERG

http:!//stateofjs.com

http:!//stateofjs.com/2016/features/

Highest rated features

http:!//stateofjs.com/2016/features/

Highest rated features

http:!//stateofjs.com/2016/buildtools/

http:!//stateofjs.com/2016/buildtools/

http:!//stateofjs.com/2016/buildtools/

The usual suspects

React

.js

.js

.json

.scss .svg.png

.coffeeReactReactReact

ReactReactReactAngular

ReactReactReactmomentjs

.css

.jsMODULES

WITH DEPENDENCIES

bundle.js

kitten.png

bundle.css

STATIC ASSETS

.js .jsx .css .less .png .svg .json .csv

∞

Everything can be bundled

var myCommonJSModule = require('my-module'); import myES2015Module from 'my-module';define(['my-module'], function (myAMDModule) {});

NARROW OR BROAD

DEFINITIONS OF

BUNDLER

or

ABOVE + JPG + CSS + PNG + JSON +

SVG + WHATEVER

The usual bundler suspects

d/l tech +0.4m/m new, es6 small & fast,

tree shaking

2.7m/m older(-ish) Webpack 2

proven, tree shaking code splitting all modules watch mode multi bundle

Browserify code commits

Webpack code commits

Rollup code commits

BUNDLER PLUGINS LOADERS

OPTIMIZERCODE SPLITTER

DEV TOOL

WEBPACK

CODE TIME!

Vs.LIVE/HOT RELOAD HOT MODULE

REPLACEMENT (HMR)

1. rebuild bundle.js 2. refresh browser

or 2. refresh only

bundle.js in browser

1. rebuild chunk 2. replace chunk

in browser

webpack.github.io

webpack.github.io/docs/list-of-plugins.html

webpack.github.io/docs/list-of-loaders.html

var autoprefixer = require('autoprefixer');module.exports = { module: { loaders: [{ test: /\.css$/, loader: 'css-loader!postcss-loader' }] }, postcss: [ autoprefixer() ]};

POSTCSS + AUTOPREFIXERnpm install postcss-loader autoprefixer !--save-dev

.example { display: flex; transition: all .5s; user-select: none; background: linear-gradient(to bottom, white, black);}

.example { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all .5s; transition: all .5s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: -webkit-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black);}

▲ ▼becomes

POSTCSS + AUTOPREFIXER

http:!//stateofjs.com/2016/buildtools/

How happy are you with your current build tools?

Unhappy Happy

State of Javascript

Webpack

Webpack dev server

Plugins

Loaders

http://stateofjs.comhttp://webpack.github.iohttp://webpack.github.io/docs/list-of-plugins.htmlhttp://webpack.github.io/docs/list-of-loaders.html

https://webpack.github.io/docs/webpack-dev-server.html

Extract TextHTML WebpackUglifyJS

Define

babel-loaderurl-loaderfile-loaderstyle-loadercss-loader

https://github.com/babel/babel-loaderhttps://github.com/webpack/url-loaderhttps://github.com/webpack/file-loaderhttps://github.com/webpack/style-loaderhttps://github.com/webpack/css-loader

https://github.com/webpack/extract-text-webpack-pluginhttps://github.com/ampedandwired/html-webpack-pluginhttps://webpack.github.io/docs/list-of-plugins.htmlhttps://github.com/mishoo/UglifyJShttps://webpack.github.io/docs/list-of-plugins.html

STUFF USED TODAY

Difference Webpack and Webpack 2https://gist.github.com/sokra/27b24881210b56bbaff7

Code Splitting and Reacthttps://medium.com/modus-create-front-end-development/automatic-code-splitting-for-react-router-w-es6-imports-a0abdaa491e9

Full tutorial on HMRhttp://andrewhfarmer.com/webpack-hmr-tutorial/

More about MHRhttps://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07#.m17ffe4km

Webpack Video Course (pay)https://egghead.io/courses/using-webpack-for-production-javascript-applications

MORE THINGS TO READ

github.com/emiloberg/webpack-tutorial

twitter.com/emiloberg