Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building a MEAN Application Going MEAN with Angular Setting Up webpack

Posted by John Weland
John Weland
42,478 Points

Webpack bundling

So I am working through the "Building a MEAN Application" course and in this video Huston Hedinger mentions that he won't be showing us how to move all of our app dependencies over to webpack, but has linked to an article in the teacher's notes. The problem is the link is a dead link.

I have attempted to fumble through this on my own and I am currently getting this error in the console.

GET http://localhost:3000/vendor/vendor.bundle.js     @     localhost/:21 


Uncaught ReferenceError: webpackJsonp is not defined(anonymous function)     @     todo.bundle.js:1

Here is my code for the various modules I wanted to migrate to webpack

app.js 
'use strict';
var angular = require('angular');
angular.module('todoListApp', []);

require('./scripts/controllers/main.js');
require('./scripts/controllers/todo.js');
require('./scripts/directives/todo.js');
require('./scripts/services/data.js');
/controllers/main.js 
'use strict';

var angular = require('angular');

angular.module('todoListApp')
.controller('mainCtrl', function($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});
  };  
})
/controllers/todo.js 
'use strict';

var angular = require('angular');

angular.module('todoListApp')
.controller('todoCtrl', function($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);
  }; 
});
/directives/todo.js 
'use strict';

var angular = require('angular');

angular.module('todoListApp')
.directive('todo', function(){
  return {
    templateUrl: 'templates/todo.html',
    replace: true,
    controller: 'todoCtrl'
  }
});
/services/data.js 
'use strict';

var angular = require('angular');


angular.module('todoListApp')
.service('dataService', function($http) {
  this.getTodos = function(cb) {
    $http.get('/api/todos').then(cb);
  };

  this.deleteTodo = function(todo) {
    console.log("I deleted the " + todo.name + " todo!");
  };

  this.saveTodos = function(todos) {
    console.log("I saved " + todos.length + " todos!");
  };

});
Ken Howard
Ken Howard
Treehouse Guest Teacher
Ken Howard
Ken Howard
Treehouse Guest Teacher

Hey John Weland.

Could you share your webpack.config.js file? I'm curious to see if the code splitting (chunking) configuration is set up properly.

John Weland
John Weland
42,478 Points

Here is my config, C&P from teachers notes.

webpack.config.js 
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")
    ]
};

2 Answers

Cena Mayo
Cena Mayo
55,236 Points

Are these two lines at the bottom of your index.html?

 <script src="/scripts/vendor.bundle.js"></script>
 <script src="/scripts/todo.bundle.js"></script>
John Weland
John Weland
42,478 Points

sure enough...

I have 

<script src="/vendors/vendor.bundle.js"></script>
<script src="/scripts/todo.bundle.js"></script>
Cena Mayo
Cena Mayo
55,236 Points
Cena Mayo
Cena Mayo
55,236 Points

Hi John,

I've been poking around with this (just completed this same video) and I'm not able to duplicate your error.

What's your webpack.config.js look like?

John Weland
John Weland
42,478 Points

I added it in the comments of my post. Thanks