Downloaded 71 times
![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/75/Webpack-Tutorial-Uppsala-JS-13-2048.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/75/Webpack-Tutorial-Uppsala-JS-25-2048.jpg)
Uploaded byEmil Öberg
Webpack Tutorial, Uppsala JS
This document serves as a tutorial on Webpack, detailing its functionality, features, and advantages for bundling JavaScript applications. It covers concepts such as code splitting, hot module replacement, and the use of plugins and loaders for various file types. Additionally, it provides links to relevant resources and tools for further learning about Webpack and web development.
More Related Content
Similar to Webpack Tutorial, Uppsala JS
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Agentic AI Architecture: Redefining Syste...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-agenticaiarchitectureredefiningsystemcommunication-251124030838-e6c70cc2-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] PHP in AI Age: The Laravel Way. (Rizqy Hi...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-phpinaiagethelaravelway-251125012602-ef9d330e-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
Webpack Tutorial, Uppsala JS
- 1. WHAT IS WEBPACK and howdoes it work? A TUTORIAL
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 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
- 14.
- 15. d/l tech + 0.4m/mnew, es6 small & fast, tree shaking 2.7m/m older(-ish) Webpack 2 proven, tree shaking code splitting all modules watch mode multi bundle
- 16.
- 17.
- 18.
- 19.
- 20.
- 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.
- 23.
- 24.
- 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 happyare you with your current build tools? Unhappy Happy
- 28. State of Javascript Webpack Webpackdev 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 andWebpack 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.