Upgrade to Webpack 2

.gitignore

@@ -1,4 +1,3 @@
 node_modules
-jam
 assets
-records.json
+npm-debug.log

README.md

@@ -1,25 +1,22 @@
 # webpack webapp example
 
-For demonstration this app uses `npm` and `jam` package manager.
+For demonstration this app uses `npm` package manager.
 
 Install and build this app with:
 
 ``` text
 # You need to have node.js installed
-npm install [email protected] [email protected] [email protected] -g
+npm install
 
 cd example-app
 npm install
-jam install
 
 webpack -p --progress --colors --devtool sourcemap --hot
 webpack -p --progress --colors --devtool sourcemap --hot --config webpack-update1.config.js
 webpack -p --progress --colors --devtool sourcemap --hot --config webpack-update2.config.js
 index.html
 ```
 
-NOTE: It's a production ready build, so it may take a while.
-
 For watching and debugging you can alternatively compile with:
 
 ``` text

app/app.js

@@ -1,8 +1,8 @@
 var $ = require("jquery");
 
 require("./style.css");
-var body = require("./body.jade")();
-require("bundle!./sources.jade")(function(sources) {
+var body = require("./body.pug")();
+require("bundle-loader!./sources.pug")(function(sources) {
 	$(function() {
 		$("#choosen-sources").html(sources());
 	});
@@ -46,7 +46,7 @@ function loading(name) {
 	isLoading = true;
 	$(".buttons").parent().removeClass("active");
 	$(".button-"+name).parent().addClass("active");
-	$(".content").html(require("./loading.jade"));
+	$(".content").html(require("./loading.pug"));
 }
 
 function finished() {
@@ -100,7 +100,7 @@ window.webpackJsonp = function(chunk, modules) {
 			if(list.length === 0) return;
 			var chunk = list.shift();
 			var li = $("<li>")
-				.html(require("./chunk.jade")
+				.html(require("./chunk.pug")
 					({chunk: chunk}));
 			$(".chunks").append(li);
 			append();

app/body.jade → app/body.pug

@@ -33,13 +33,13 @@ nav.navbar.navbar-default.navbar-top
 				b
 					| webpack on github
 			h2 Choosen sources
-			#choosen-sources!= require("./loading.jade")()
+			#choosen-sources!= require("./loading.pug")()
 		.col-md-4
 			.page-header
 				h1 status
 					small  loaded chunks
 			ul.chunks
-				li!= require("./chunk.jade")({chunk: 0})
+				li!= require("./chunk.pug")({chunk: 0})
 			if module.hot
 				.page-header
 					h1 HMR

app/home.pug

@@ -0,0 +1,3 @@
+.alert.alert-success You are on <em>Home</em>
+h2 home.pug
+pre: code= require("!raw-loader!./home.pug")

app/pages.js

@@ -3,7 +3,7 @@ module.exports = {
 		switch(name) {
 		case "home":
 			require([], function() {
-				callback(require("./home.jade"));
+				callback(require("./home.pug"));
 			});
 			break;
 		case "test1":
@@ -13,12 +13,12 @@ module.exports = {
 			break;
 		case "test2":
 			require.ensure([], function() {
-				callback(require("./test2.jade"));
+				callback(require("./test2.pug"));
 			}, "test2+3");
 			break;
 		case "test3":
 			require.ensure([], function() {
-				callback(require("./test3.jade"));
+				callback(require("./test3.pug"));
 			}, "test2+3");
 			break;
 		default: callback(null);

app/sources.jade → app/sources.pug

@@ -6,18 +6,18 @@ ul.nav.nav-tabs
 	li
 		a(href="#body", data-toggle="tab")
 			i.icon-leaf
-			|  body.jade
+			|  body.pug
 	li
 		a(href="#sources", data-toggle="tab")
 			i.icon-file
-			|  sources.jade
+			|  sources.pug
 .tab-content
 	#app.tab-pane.active
 		pre.pre-scrollable
-			code= require("!raw!./app.js")
+			code= require("!raw-loader!./app.js")
 	#body.tab-pane
 		pre.pre-scrollable
-			code= require("!raw!./body.jade")
+			code= require("!raw-loader!./body.pug")
 	#sources.tab-pane
 		pre.pre-scrollable
-			code= require("!raw!./sources.jade")
+			code= require("!raw-loader!./sources.pug")

app/style.css

@@ -1,9 +1,5 @@
 body {}
-------
+
 .navbar-default {
-	background: #FFA !important;
-}
-------
-.navbar-default {
-	background: #AFA !important;
-}
+	background: #dedede !important;
+}

app/test1/content.pug

@@ -0,0 +1,6 @@
+h1 three.js canvas - camera - orthographic example
+.three-container
+h2 test1/index.js
+pre.pre-scrollable: code= require("!raw-loader!./index.js")
+h2 test1/content.pug
+pre: code= require("!raw-loader!./content.pug")

app/test1/index.js

@@ -1,9 +1,9 @@
 exports.render = function() {
-	return require("./content.jade")();
+	return require("./content.pug")();
 };
 
 exports.start = function() {
-	var THREE = require("three");
+	var THREE = require("../../web_modules/three/index.js");
 	require("jquery");
 
 	// three.js canvas - camera - orthographic example

app/test2.jade → app/test2.pug

@@ -1,14 +1,14 @@
 .alert.alert-warning
 	span This is the <em>second</em> test.
-h2 test2.jade
-pre: code= require("!raw!./test2.jade")
-------
+h2 test2.pug
+pre: code= require("!raw-loader!./test2.pug")
+
 .alert.alert-warning
 	span This is the <b>second</b> test. (Updated Version 1)
-h2 test2.jade
-pre: code= require("!raw!./test2.jade")
-------
+h2 test2.pug
+pre: code= require("!raw-loader!./test2.pug")
+
 .alert.alert-warning
 	span This is the <em>second</em> test. (Updated Version 2)
-h2 test2.jade
-pre: code= require("!raw!./test2.jade")
+h2 test2.pug
+pre: code= require("!raw-loader!./test2.pug")

app/test3.jade → app/test3.pug

@@ -3,13 +3,13 @@
 	= " "
 	b last
 	|  test.
-------
+
 .alert.alert-error
 	| This is the
 	= " "
 	i last
 	|  test. (Updated Version 1)
-------
+
 .alert.alert-error
 	| This is the
 	= " "

package.json

@@ -1,41 +1,37 @@
-{
-	"name": "example-app",
-	"version": "0.11.0",
-	"author": "Tobias Koppers @sokra",
-	"description": "example web app for webpack",
-	"dependencies": {
-		"webpack": "1.2.x",
-		"webpack-dev-server": "1.3.x",
-		"bootstrap": "https://github.com/twbs/bootstrap/archive/v3.0.2.tar.gz",
-		"jade-loader": "0.6.x",
-		"json-loader": "0.5.x",
-		"url-loader": "0.5.x",
-		"file-loader": "0.5.x",
-		"coffee-loader": "0.7.x",
-		"jshint-loader": "0.6.x",
-		"bundle-loader": "0.5.x",
-		"style-loader": "0.6.x",
-		"css-loader": "0.6.x",
-		"less-loader": "0.7.x",
-		"exports-loader": "0.6.x",
-		"raw-loader": "0.5.x"
-	},
-	"jam": {
-		"dependencies": {
-			"jquery": "1.9.1"
-		}
-	},
-	"licenses": [
-		{
-			"type": "MIT",
-			"url": "http://www.opensource.org/licenses/mit-license.php"
-		}
-	],
-	"scripts": {
-		"start": "webpack-dev-server -d --colors"
-	},
-	"engines": {
-		"node":  ">=0.1.30"
-	},
-	"homepage": "http://github.com/webpack/webpack-example"
-}
+{
+  "name": "example-app",
+  "version": "0.12.0",
+  "author": "Tobias Koppers @sokra",
+  "description": "example web app for webpack",
+  "dependencies": {
+    "bootstrap": "https://github.com/twbs/bootstrap/archive/v3.0.2.tar.gz",
+    "bundle-loader": "^0.5.4",
+    "coffee-loader": "^0.7.2",
+    "css-loader": "^0.26.1",
+    "exports-loader": "^0.6.3",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
+    "file-loader": "^0.9.0",
+    "jquery": "^3.1.1",
+    "jshint-loader": "^0.8.3",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "pug": "^2.0.0-beta6",
+    "pug-loader": "^2.3.0",
+    "raw-loader": "^0.5.1",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^2.2.0-rc.2",
+    "webpack-dev-server": "^2.2.0-rc.0"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "http://www.opensource.org/licenses/mit-license.php"
+    }
+  ],
+  "scripts": {
+    "start": "webpack-dev-server -d --colors"
+  },
+  "homepage": "http://github.com/webpack/webpack-example"
+}

web_modules/three/index.js

@@ -1 +1 @@
-module.exports = require("exports?THREE!./Three.min.js");
+module.exports = require("exports-loader?THREE!./Three.min.js");

webpack-update1.config.js

@@ -1,4 +1,2 @@
 module.exports = require("./webpack.config.js");
 module.exports.output.filename = "ignored";
-module.exports.recordsPath = module.exports.recordsOutputPath;
-module.exports.fakeUpdateVersion = 1;

webpack-update2.config.js

@@ -1,2 +1 @@
 module.exports = require("./webpack-update1.config.js");
-module.exports.fakeUpdateVersion = 2;