diff --git a/Webpack.md b/Webpack.md
new file mode 100755
index 0000000..9e33b92
--- /dev/null
+++ b/Webpack.md
@@ -0,0 +1,337 @@
+# Webpack
+
+- Webpack assembles your code and uses plug-ins to add additional features
+- The only thing it does by itself is deal with ES2015 import/export statements
+
+## Lesson Objectives
+
+1. Install/Run Webpack
+1. Create default export
+1. Create a named export
+1. Import only certain exports of file
+1. Run webpack with NPM
+1. Run webpack with Babel
+1. Run webpack with JSX
+1. Run webpack dev server
+
+## Install/Run Webpack
+
+```
+npm init
+npm install webpack --save-dev
+```
+
+Create a test file:
+
+```
+mkdir js
+touch js/index.js
+```
+
+Add basic log to `index.js`:
+
+```javascript
+console.log('hi');
+```
+
+Create a `dist` folder:
+
+```
+mkdir dist
+```
+
+We can now run:
+
+```
+./node_modules/.bin/webpack js/index.js dist/bundle.js
+```
+
+Create a basic HTML file (`index.html`):
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Run it in the browser:
+
+```
+open index.html
+```
+
+## Create default export
+
+Create a fake library (`js/mylib.js`)
+
+```javascript
+const myFunc = function(){
+ console.log('included!');
+}
+
+export default myFunc;
+```
+
+include it in `js/index.js`
+
+```javascript
+import defaultImport from './mylib.js';
+defaultImport();
+```
+
+## Create a named export
+
+Create the export in `js/mylib.js`:
+
+```javascript
+export const myFunc2 = function(){
+ console.log('also included');
+}
+```
+
+**NOTE** The export can be defined when the export is created. This can happen for default and named exports
+
+Import the function in `js/index.js`:
+
+```javascript
+import defaultImport, {myFunc2 as renamedExport} from './mylib.js';
+defaultImport();
+renamedExport();
+```
+
+If you don't want to rename the import in `js/index.js`:
+
+```javascript
+import defaultImport, {myFunc2} from './mylib.js';
+defaultImport();
+myFunc2();
+```
+
+We can of course set exports to variables in `js/mylib.js`:
+
+```javascript
+const savedFunc = function(){
+ console.log('also included');
+}
+
+export {savedFunc as myFunc2}
+```
+
+If the variable name is the same as the export name:
+
+```javascript
+const myFunc2 = function(){
+ console.log('also included');
+}
+
+export {myFunc2}
+```
+
+## Import only certain exports of file
+
+You can have multiple named exports in `js/mylib.js`:
+
+```javascript
+const unnecessary = function(){
+ console.log('unnecessary');
+}
+
+export {
+ myFunc2,
+ unnecessary as omitme
+}
+```
+
+If you don't import them in `js/index.js`, they won't work:
+
+```javascript
+import defaultImport, {myFunc2} from './mylib.js';
+defaultImport();
+myFunc2();
+omitme();
+```
+
+## Run webpack with NPM
+
+Create `webpack.config.js` to simplify the terminal command
+
+```javascript
+module.exports = {
+ entry: './js/index.js',
+ output: {
+ filename: 'dist/bundle.js'
+ }
+};
+```
+
+Now we can run:
+
+```
+./node_modules/.bin/webpack
+```
+
+We can put this command in our `package.json` file:
+
+```javascript
+"scripts": {
+ "build": "webpack"
+},
+```
+
+and run
+
+```
+npm run build
+```
+
+## Run webpack with Babel
+
+First install the core transpiler, the loader which loads babel-plugins, and the es2015 plugin for babel:
+
+```
+npm install babel-core babel-loader babel-preset-es2015 --save-dev
+```
+
+Modify the webpack config to use these:
+
+```javascript
+module.exports = {
+ entry: './js/index.js',
+ output: {
+ filename: 'dist/bundle.js'
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|jsx)$/, //for all files that end with js/jsx
+ use: {
+ loader: 'babel-loader', //use the babel loader to load:
+ options: {
+ presets: ["es2015"] //the es2015 compiler
+ }
+ }
+ }
+ ]
+ }
+};
+```
+
+Now use some ES2015 syntax in `js/index.js`:
+
+```javascript
+class Foo {
+ bar(){
+ console.log('classes!');
+ }
+}
+```
+
+The result in `dist/build.js` is the ES5 version:
+
+```javascript
+var Foo = function () {
+ function Foo() {
+ _classCallCheck(this, Foo);
+ }
+
+ _createClass(Foo, [{
+ key: 'bar',
+ value: function bar() {
+ console.log('classes!');
+ }
+ }]);
+
+ return Foo;
+}();
+```
+
+## Run webpack with JSX
+
+Install react core, the dom manipulator, and the babel transpiler plugin:
+
+```
+npm install react react-dom babel-preset-react --save-dev
+```
+
+In `webpack.config.js` use the `babel-loader` to load the `react` plugin:
+
+```javascript
+use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ["es2015", "react"]
+ }
+}
+```
+
+Add a `main` tag and move our `script` tag to the bottom of `index.html`
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Write some react in `js/index.js`:
+
+```javascript
+import ReactDOM from 'react-dom'; //import react-dom from npm install dir
+import React from 'react'; //import react from npm install dir
+
+ReactDOM.render(
+ Hello, world!
,
+ document.querySelector('main')
+);
+```
+
+## Run webpack dev server
+
+Webpack dev server is an "all-in-one" package that
+
+- provides a basic static file server that serves your front-end static html/css/js files
+- watches your files and runs webpack when any of them change
+- reloads your browser whenever webpack is run
+
+Install it:
+
+```
+npm install webpack-dev-server --save-dev
+```
+
+Alter `package.json` to use webpack-dev-server instead of webpack
+
+```javascript
+"scripts": {
+ "build": "webpack-dev-server --open"
+},
+```
+
+Now you can run
+
+```
+npm run build
+```
+
+and it will open up your browser automatically. Change a file, and see it reload.
+
+**NOTE** Webpack doesn't actually write the transpiled files to disk. Instead it serves them from memory. You can delete the `dist` directory
+
+```
+rm -r dist
+```