Setup webpack

treehouse-projects · Mar 2, 2016 · d18e144 · d18e144
1 parent cbb9134
commit d18e144
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 node_modules
+vendor.bundle.js
+todo.bundle.js
diff --git a/app/app.js b/app/app.js
@@ -0,0 +1,9 @@
+'use strict';
+
+var angular = require('angular');
+
+angular.module('todoListApp', []);
+
+require('./scripts/services');
+require('./scripts/directives');
+require('./scripts/controllers');
diff --git a/app/scripts/controllers/index.js b/app/scripts/controllers/index.js
@@ -0,0 +1,6 @@
+'use strict';
+
+var angular = require('angular');
+
+angular.module('todoListApp').controller('mainCtrl', require('./main'));
+angular.module('todoListApp').controller('todoCtrl', require('./todo'));
diff --git a/public/scripts/controllers/main.js → app/scripts/controllers/main.js b/public/scripts/controllers/main.js → app/scripts/controllers/main.js
@@ -1,16 +1,17 @@
 'use strict';
 
-angular.module('todoListApp')
-.controller('mainCtrl', function($scope, dataService){
+function MainCtrl ($scope, dataService) {
 
   dataService.getTodos(function(response){
     var todos = response.data.todos;
     $scope.todos =  todos;
-    });
+  });
 
   $scope.addTodo = function() {
     $scope.todos.unshift({name: "This is a new todo.",
                       completed: false});
   };
 
-})
+}
+
+module.exports = MainCtrl;
diff --git a/public/scripts/controllers/todo.js → app/scripts/controllers/todo.js b/public/scripts/controllers/todo.js → app/scripts/controllers/todo.js
@@ -1,18 +1,21 @@
 'use strict';
 
-angular.module('todoListApp')
-.controller('todoCtrl', function($scope, dataService) {
+function TodoCtrl ($scope, dataService) {
+
   $scope.deleteTodo = function(todo, index) {
     $scope.todos.splice(index, 1);
     dataService.deleteTodo(todo);
   };
-  
+
   $scope.saveTodos = function() {
     var filteredTodos = $scope.todos.filter(function(todo){
       if(todo.edited) {
         return todo
       };
     })
     dataService.saveTodos(filteredTodos);
-  }; 
-});
+  };
+
+}
+
+module.exports = TodoCtrl;
diff --git a/app/scripts/directives/index.js b/app/scripts/directives/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+var angular = require('angular');
+
+angular.module('todoListApp').directive('todo', require('./todo'));
diff --git a/public/scripts/directives/todo.js → app/scripts/directives/todo.js b/public/scripts/directives/todo.js → app/scripts/directives/todo.js
@@ -1,10 +1,11 @@
 'use strict';
 
-angular.module('todoListApp')
-.directive('todo', function(){
+function ToDoDirective () {
   return {
     templateUrl: 'templates/todo.html',
     replace: true,
     controller: 'todoCtrl'
   }
-});
+}
+
+module.exports = ToDoDirective;
diff --git a/public/scripts/services/data.js → app/scripts/services/data.js b/public/scripts/services/data.js → app/scripts/services/data.js
@@ -1,7 +1,7 @@
 'use strict';
 
-angular.module('todoListApp')
-.service('dataService', function($http) {
+function DataService ($http) {
+
   this.getTodos = function(cb) {
     $http.get('/api/todos').then(cb);
   };
@@ -14,4 +14,6 @@ angular.module('todoListApp')
     console.log("I saved " + todos.length + " todos!");
   };
 
-});
+}
+
+module.exports = DataService;
diff --git a/app/scripts/services/index.js b/app/scripts/services/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+var angular = require('angular');
+
+angular.module('todoListApp').service('dataService', require('./data'));
diff --git a/package.json b/package.json
@@ -17,6 +17,10 @@
   },
   "homepage": "https://github.com/treehouse/mean-todo#readme",
   "dependencies": {
+    "angular": "^1.4.8",
     "express": "4.13.4"
+  },
+  "devDependencies": {
+    "webpack": "1.12.14"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -6,9 +6,9 @@
   <link rel="stylesheet" href="/styles/main.css" type="text/css">
 </head>
 <body ng-app="todoListApp">
-  
+
   <h1>My TODOs!</h1>
-  
+
   <div class="list" ng-controller="mainCtrl">
     <div class="add">
       <a href="#" ng-click="addTodo()">
@@ -17,12 +17,7 @@ <h1>My TODOs!</h1>
     <todo></todo>
    </div>
 
-
-  <script src="/vendor/angular.js"></script>
-  <script src="/scripts/app.js"></script>
-  <script src="/scripts/controllers/main.js"></script>
-  <script src="/scripts/controllers/todo.js"></script>
-  <script src="/scripts/services/data.js"></script>
-  <script src="/scripts/directives/todo.js"></script>
+  <script src="/scripts/vendor.bundle.js"></script>
+  <script src="/scripts/todo.bundle.js"></script>
 </body>
-</html>
+</html>
diff --git a/public/scripts/app.js b/public/scripts/app.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,17 @@
+var webpack = require('webpack'),
+       path = require('path');
+
+module.exports = {
+    context: __dirname + '/app',
+    entry: {
+        app: './app.js',
+        vendor: ['angular']
+    },
+    output: {
+        path: __dirname + '/public/scripts',
+        filename: 'todo.bundle.js'
+    },
+    plugins: [
+        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
+    ]
+};