├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── presentation.md
├── presentation.pdf
├── src
    ├── cat.png
    ├── index.js
    ├── miau.mp3
    └── style.styl
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | dist
3 | node_modules


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | 
 2 | The MIT License (MIT)
 3 | 
 4 | Copyright (c) 2017 Aarni Koskela
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Demystifying Webpack
 2 | 
 3 | This is the presentation and code from
 4 | the Demystifying Webpack presentation I held
 5 | at Turku <3 Frontend on 26th April 2017.
 6 | 
 7 | The presentation is available in PDF and
 8 | Markdown formats.
 9 | 
10 | * [presentation.pdf](./presentation.pdf)
11 | * [presentation.md](./presentation.md)
12 | 
13 | The commits in the repository reflect the
14 | evolution of the code as it was written during
15 | the presentation.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webpack-demystified",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server"
 8 |   },
 9 |   "dependencies": {
10 |     "babel-core": "^6.24.1",
11 |     "babel-loader": "^7.0.0",
12 |     "babel-preset-env": "^1.4.0",
13 |     "babel-preset-react": "^6.24.1",
14 |     "css-loader": "^0.28.0",
15 |     "file-loader": "^0.11.1",
16 |     "react": "^15.5.4",
17 |     "react-dom": "^15.5.4",
18 |     "style-loader": "^0.16.1",
19 |     "stylus": "^0.54.5",
20 |     "stylus-loader": "^3.0.1",
21 |     "url-loader": "^0.5.8",
22 |     "webpack": "^2.4.1"
23 |   },
24 |   "devDependencies": {
25 |     "webpack-dev-server": "^2.4.4"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/presentation.md:
--------------------------------------------------------------------------------
  1 | # Demystifying Webpack
  2 | Turku ❤ Frontend
  3 | 26 April 2017
  4 | 
  5 | ## Hello! 👋
  6 | * I'm Aarni Koskela (@akx)
  7 | * I've been writing code since I was about 6 years old
  8 | * ... and doing web stuff since IE 6 was a Good Thing
  9 | * Now working at Valohai on a cutting-edge machine learning infrastructure SaaS (that's a mouthful)
 10 | 
 11 | 
 12 | ## A Disclaimer
 13 | 
 14 | * I'm not going to cover all the more advanced features Webpack supports in this presentation.
 15 | * Juho Vepsäläinen (@bebraw) has a book and a presentation on that! https://leanpub.com/survivejs-webpack
 16 |  
 17 | ## And by the way
 18 | 
 19 | * Please feel free to interrupt at any time!
 20 | 
 21 | ## So, what is Webpack anyway?
 22 | 
 23 | Webpack is a module bundler (like its predecessor Browserify)
 24 | 
 25 | It . . .
 26 | 
 27 | * takes one or more files (primarily, but not only, JavaScript)
 28 | * transforms them
 29 | * produces one or more bundle files (again, primarily but not necessarily only JavaScript)
 30 | 
 31 | ## Why Webpack?
 32 | 
 33 | * If you want to use ES6/JSX syntax in all browsers (e.g. using Babel or Bublé)
 34 | * If you want to optimize and minify your code before delivering it to clients (built-in!)
 35 | * If you want nicer encapsulation and componentization (CSS within your bundle, for instance)
 36 | * If you want live code reloading (lovely for development)
 37 | 
 38 | ## But isn't Webpack impossible to configure?
 39 | 
 40 | * That's the myth!
 41 | * Webpack is pretty easy to get going with (with a basic configuration)
 42 | * Of course, more complex configurations (splitting, per-module hot reloading, ...) get more complicated
 43 | 
 44 | ## Let's do this!
 45 | 
 46 | Let's set up a simple SPA (single page application) from scratch with
 47 | 
 48 | * Webpack
 49 | * React
 50 | * Stylus-based stylesheets (could just as well be SASS/SCSS or LESS)
 51 | * Photos of cats, because of course :)
 52 | 
 53 | (in reality, you might want to start something like this using create-react-app, but for the sake of practice...)
 54 | 
 55 | ## First: installing stuff!
 56 | 
 57 | The packages we need are:
 58 | * webpack (duh)
 59 | * react (React itself)
 60 | * react-dom (React's browser interface)
 61 | * file-loader (allows `require`ing binary files)
 62 | * style-loader (injects <style> tags for CSS)
 63 | * css-loader (loads and minifies CSS)
 64 | * stylus-loader (loads Stylus style sheets)
 65 | * stylus (a dependency of stylus-loader)
 66 | * babel-loader (Webpack loader for Babel)
 67 | * babel-core (Babel's core without a CLI)
 68 | * babel-preset-env (a general ES6 Babel preset)
 69 | * babel-preset-react (a Babel preset for React)
 70 | 
 71 | Also, for development, let's install
 72 | 
 73 | * webpack-dev-server (development server)
 74 | 
 75 | ## Yarrrrn!
 76 | 
 77 | * `yarn init`
 78 | * `yarn add webpack react react-dom url-loader file-loader style-loader css-loader stylus-loader stylus babel-loader babel-core babel-preset-react babel-preset-env`
 79 | * `yarn add --dev webpack-dev-server`
 80 | 
 81 | We could just as well use npm, but yarn is faster.
 82 | 
 83 | ## Second: the configuration!
 84 | 
 85 | Webpack can be run without a configuration file, but no one does that.
 86 | 
 87 | * Webpack is configured by way of a JavaScript configuration file, by default webpack.config.js.
 88 | * The configuration file is Real, Actual JavaScript, which will be executed by Node.js, so you can do whatever you like in it, as long as you `module.exports =` a configuration object at the end.
 89 | * We'll just keep it reasonably simple for now...
 90 | 
 91 | ### Simplest configuration
 92 | 
 93 | ```javascript
 94 | module.exports = {
 95 |   entry: './src/index.js',
 96 |   output: {
 97 |     path: __dirname + '/dist',
 98 |     filename: 'bundle.js',
 99 |   },
100 | };
101 | ```
102 | 
103 | This won't do anything fancy since no loaders are set But it'll bundle things and let us to use `require()` already!
104 | 
105 | ## Let's write some code!
106 | 
107 | This is src/index.js, our entry point. 
108 | 
109 | ```javascript
110 | import React from 'react';
111 | import ReactDOM from 'react-dom';
112 | 
113 | document.write('herlo worl');
114 | ```
115 | 
116 |  
117 | ## Let's rev up the dev server!
118 | 
119 | Let's add an incantation to open the dev server to our `package.json` file, so it's easier to start now and later.
120 | 
121 | ```javascript
122 |   "scripts": {
123 |     "dev": "webpack-dev-server"
124 |   }
125 | ```
126 | 
127 | Now all we need to do is `yarn dev` and navigate to http://localhost:8080/bundle – a virtual HTML file that loads our bundle
128 | 
129 | ## Let's add loaders!
130 | 
131 | Anything other than plain JavaScript must be transformed by way of loaders; we've already installed a bunch of them, so let's configure them...
132 | 
133 | ```javascript
134 | module: {
135 |   rules: [
136 |     {
137 |       test: /.styl$/,
138 |       use: ['style-loader', 'css-loader', 'stylus-loader'],
139 |     },
140 |     {
141 |       test: /.(jpg|jpeg|png)$/,
142 |       use: ['file-loader'],
143 |     },
144 |     {
145 |       test: /.jsx?$/,
146 |       use: {
147 |         loader: 'babel-loader',
148 |         options: {
149 |           presets: ['env', 'react'],
150 |         },
151 |       },
152 |       exclude: /node_modules/,
153 |     },
154 |   ],
155 | }
156 | ```
157 | 
158 | ## Let's write some React!
159 | 
160 | ```javascript
161 | import React from 'react';
162 | import ReactDOM from 'react-dom';
163 | import CatImageURL from './cat.png';
164 | 
165 | class CatApp extends React.Component {
166 | 	constructor() {
167 | 		super();
168 | 		this.state = {number: 1};
169 | 	}
170 | 	render() {
171 | 		const cats = [];
172 | 		for(let i = 0; i < this.state.number; i++) {
173 | 			cats.push(<img src={CatImageURL} key={i} />);
174 | 		}
175 | 		return (
176 | 			<div>
177 | 				<h1>Cat app</h1>
178 | 				<button onClick={(e) => this.setState({number: this.state.number + 1})}>More mew!</button>
179 | 				<br />
180 | 				{cats}
181 | 			</div>
182 | 		);
183 | 	}
184 | }
185 | 
186 | ReactDOM.render(<CatApp />, document.body);
187 | ```
188 | 
189 | Note how any edits reload the application in real time! 😎
190 |  
191 | ## Let's also add some style!
192 | 
193 | Since style-loader supports hot reloading, so we can tweak styles even faster!
194 | (That is, if we're running the dev server with --hot)
195 | 
196 | ```javascript
197 | import style from './style.styl';
198 | ```
199 | 
200 | ## We're done developing,  let's go to production!
201 | 
202 | * The -p (for production) flag to webpack (the CLI tool) enables minification and other optimizations
203 | * The --progress flag lets us watch exciting things happen
204 | * So let's run: `./node_modules/.bin/webpack -p --progress`
205 | * And lo and behold; there's a bundle.js and a PNG file in dist/
206 | * Look ma, no CSS file though! (It's embedded in the JS bundle.)
207 | * You can serve the built files with any old web server, and/or embed them in your apps.
208 | 
209 | ## That's it!
210 | 
211 | Simple, no?
212 | 
213 | Thank you!  Questions?
214 | 
215 | @akx – aarni@valohai.com
216 |  
217 |  


--------------------------------------------------------------------------------
/presentation.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akx/demystifying-webpack/162137118dd54f30a6c98dd0ae8844dba733483e/presentation.pdf


--------------------------------------------------------------------------------
/src/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akx/demystifying-webpack/162137118dd54f30a6c98dd0ae8844dba733483e/src/cat.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import CatImageURL from './cat.png';
 4 | import MiauSoundURL from './miau.mp3';
 5 | import style from './style.styl';
 6 | 
 7 | const playMiau = () => {
 8 | 	const el = Object.assign(
 9 | 		document.createElement('audio'),
10 | 		{
11 | 			src: MiauSoundURL,
12 | 			autoPlay: false,
13 | 			playbackRate: 0.5 + Math.random()
14 | 		}
15 | 	);
16 | 	document.body.appendChild(el);
17 | 	el.play();
18 | 	// TODO: clean up the stray cats
19 | };
20 | 
21 | class CatApp extends React.Component {
22 | 	constructor() {
23 | 		super();
24 | 		this.state = {number: 1};
25 | 	}
26 | 	render() {
27 | 		const cats = [];
28 | 		for(let i = 0; i < this.state.number; i++) {
29 | 			cats.push(
30 | 				<img
31 | 				onMouseOver={playMiau}	
32 | 				src={CatImageURL}
33 | 				key={i}
34 | 				/>);
35 | 		}
36 | 		return (
37 | 			<div>
38 | 				<audio src={MiauSoundURL} autoPlay={false} ref={(el) => this.audio = el} />
39 | 				<h1>Cat app</h1>
40 | 				<button
41 | 					onClick={(e) => this.setState({number: this.state.number + 1})}>More mew!</button>
42 | 				<br />
43 | 				{cats}
44 | 			</div>
45 | 		);
46 | 	}
47 | }
48 | 
49 | ReactDOM.render(<CatApp />, document.body);
50 | 


--------------------------------------------------------------------------------
/src/miau.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akx/demystifying-webpack/162137118dd54f30a6c98dd0ae8844dba733483e/src/miau.mp3


--------------------------------------------------------------------------------
/src/style.styl:
--------------------------------------------------------------------------------
 1 | body
 2 | 	background hotpink
 3 | 	font 15pt "Comic Sans MS"
 4 | 
 5 | input, img
 6 | 	transition 1s all
 7 | 
 8 | 	&:hover
 9 | 		transform scale(3) rotate(360deg)
10 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	entry: './src/index.js',
 3 | 	output: {
 4 | 		path: __dirname + '/dist',
 5 | 		filename: 'bundle.js',
 6 | 	},
 7 | 	module: {
 8 | 		rules: [
 9 | 			{
10 | 				test: /.styl$/,
11 | 				use: ['style-loader', 'css-loader', 'stylus-loader'],
12 | 			},
13 | 			{
14 | 				test: /.(jpg|jpeg|png|mp3)$/,
15 | 				use: ['file-loader'],
16 | 			},
17 | 			{
18 | 				test: /.jsx?$/,
19 | 				use: {
20 | 					loader: 'babel-loader',
21 | 					options: {
22 | 						presets: ['env', 'react'],
23 | 					},
24 | 				},
25 | 				exclude: /node_modules/,
26 | 			},
27 | 		],
28 | 	},
29 | };


--------------------------------------------------------------------------------