Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webpack Tutorial, Uppsala JS

972 views

Published on

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.

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/FM1e7 ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Webpack Tutorial, Uppsala JS

  1. 1. WHAT IS WEBPACK and how does it work? A TUTORIAL
  2. 2. github.com/emiloberg twitter.com/emiloberg monator.com HELLO I'M EMIL ÖBERG
  3. 3. http: //stateofjs.com
  4. 4. http: //stateofjs.com/2016/features/ Highest rated features
  5. 5. http: //stateofjs.com/2016/features/ Highest rated features
  6. 6. http: //stateofjs.com/2016/buildtools/
  7. 7. http: //stateofjs.com/2016/buildtools/
  8. 8. http: //stateofjs.com/2016/buildtools/
  9. 9. Theusualsuspects
  10. 10. React .js .js .json .scss .svg.png .coffee ReactReactReact ReactReactReactAngular ReactReactReactmomentjs .css .js MODULES WITH DEPENDENCIES
  11. 11. bundle.js kitten.png bundle.css STATIC ASSETS
  12. 12. .js .jsx .css .less .png .svg .json .csv ∞ Everything can be bundled
  13. 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
  14. 14. Theusualbundlersuspects
  15. 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
  16. 16. Browserify code commits
  17. 17. Webpack code commits
  18. 18. Rollup code commits
  19. 19. BUNDLER PLUGINS
 LOADERS OPTIMIZER
 CODE SPLITTER DEV TOOL WEBPACK
  20. 20. CODE TIME!
  21. 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
  22. 22. webpack.github.io
  23. 23. webpack.github.io/docs/list-of- plugins.html
  24. 24. webpack.github.io/docs/list-of- loaders.html
  25. 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. 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. 27. http: //stateofjs.com/2016/buildtools/ How happy are you with your current build tools? Unhappy Happy
  28. 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. 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
  30. 30. github.com/emiloberg/webpack-tutorial twitter.com/emiloberg

×