Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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.

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

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>

sure enough...

I have

<script src="/vendors/vendor.bundle.js"></script>
<script src="/scripts/todo.bundle.js"></script>

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?

I added it in the comments of my post. Thanks