Webpack Tutorial, Uppsala JS
2 likes1,337 views
Presentation from UppsalaJS, November 3, 2016. Together we built a Javascript app and explored many parts of Webpack and how we can use Webpack to create production ready code as well as use it to help with our development.
![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](https://image.slidesharecdn.com/uppsalajs-webpack-161020152946/85/Webpack-Tutorial-Uppsala-JS-13-320.jpg)
![var autoprefixer = require('autoprefixer');
module.exports = {
module: {
loaders: [{
test: /.css$/,
loader: 'css-loader!postcss-loader'
}]
},
postcss: [
autoprefixer()
]
};
POSTCSS + AUTOPREFIXER
npm install postcss-loader autoprefixer --save-dev](https://image.slidesharecdn.com/uppsalajs-webpack-161020152946/85/Webpack-Tutorial-Uppsala-JS-25-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (18)
Ad
Similar to Webpack Tutorial, Uppsala JS (20)
Ad
More from Emil Öberg (7)
Recently uploaded (20)
Webpack Tutorial, Uppsala JS
- 1. WHAT IS WEBPACK and how does it work? A TUTORIAL
- 12. .js .jsx .css .less .png .svg .json .csv ∞ Everything can be bundled
- 13. 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
- 15. 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
- 20. CODE TIME!
- 21. 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
- 25. var autoprefixer = require('autoprefixer'); module.exports = { module: { loaders: [{ test: /.css$/, loader: 'css-loader!postcss-loader' }] }, postcss: [ autoprefixer() ] }; POSTCSS + AUTOPREFIXER npm install postcss-loader autoprefixer --save-dev
- 26. .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
- 27. http: //stateofjs.com/2016/buildtools/ How happy are you with your current build tools? Unhappy Happy
- 28. State of Javascript Webpack Webpack dev server Plugins Loaders http://stateofjs.com http://webpack.github.io http://webpack.github.io/docs/list-of-plugins.html http://webpack.github.io/docs/list-of-loaders.html https://webpack.github.io/docs/webpack-dev-server.html Extract Text HTML Webpack UglifyJS Define babel-loader url-loader file-loader style-loader css-loader https://github.com/babel/babel-loader https://github.com/webpack/url-loader https://github.com/webpack/file-loader https://github.com/webpack/style-loader https://github.com/webpack/css-loader https://github.com/webpack/extract-text-webpack-plugin https://github.com/ampedandwired/html-webpack-plugin https://webpack.github.io/docs/list-of-plugins.html https://github.com/mishoo/UglifyJS https://webpack.github.io/docs/list-of-plugins.html STUFF USED TODAY
- 29. Difference Webpack and Webpack 2 https://gist.github.com/sokra/27b24881210b56bbaff7 Code Splitting and React https://medium.com/modus-create-front-end-development/automatic-code-splitting- for-react-router-w-es6-imports-a0abdaa491e9 Full tutorial on HMR http://andrewhfarmer.com/webpack-hmr-tutorial/ More about MHR https://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