webpack tutorial, uppsala js
TRANSCRIPT
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-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