Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.
I get this error when running npm start
SyntaxError: Unexpected token ILLEGAL
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
I'm sorry James, I'll need a little more context to be able to help you. Can you give me any kind of reproduction steps?
Hi Kent, I was wondering how you went about setting up the test server. Do you use 'webpack-dev-server'? I do note see it set up in the config and it appears as though your webstorm configuration does not show debug or run configuration.
Here's the npm script for running
npm start https://github.com/eggheadio/webpack-angular/blob/finished/intro/package.json#L9
I've followed the video:
P.S. I'm not using webstorm on the current workstation
My bad... forgot the './' in the entry file.
Sounds like you're missing your entry file
index.js. Does your
app directory have an
Ah, great :-)
It's my humble request that you guys should do a video on Lazy loading of directives, controllers and other components from another module.
Hi, i get the error
ERROR in ./app/index.js Module not found: Error: Cannot resolve module 'angular' in .../webpack-angular/app @ ./app/index.js 1:14-32
angular is still on the package.json as dependencies.
in the index.js the same as in the video
var angular = require('angular'); var ngModule = angular.module('app', ); console.log(ngModule);
First thing I would double check is that you can find the
angular directory in your
node_modules. Make sure you not only have
angular referenced in your
dependencies in your
package.json, but that you've also run
$ npm install and that the
angular directory appears in your
node_modules. Once you're sure of that, fire up webpack again and see if that works.
I am on a windows machine. Not sure if that has anything to do with it. Anyways, try changing the package.json "start" line to: "start": "webpack-dev-server --content-base app",
It worked for me. Here is the reference: https://github.com/webpack/webpack/issues/1020
The problem my me is solved by reinstalling python 2.7, cause i uninstalled it before. Thanks!
The first thing I hear when I start a tutorial normally is a explanation of "What we're going to learn and why ". But in your tutorials , you just start coding ! no explanation , no nothing . Seems you've written your codes somewhere and you just copy and paste it here , with no explanation. What is webpack ? Why we should use it ? What is it good for ?
I agree they start with no explanation... i don't know why most videos in egghead start like that..
This lesson series assumes you already know what Webpack and angular are. If you don't know what Webpack is, you may benefit from this playlist: https://egghead.io/playlists/learning-webpack
Sorry, I don't remember getting notified of your response. See this: https://egghead.io/forums/lesson-discussion/topics/angular-with-webpack-introduction#post-2552
Just an FYI. In your npm scripts - you don't need to give the full path the the node_modules/.bin directory. npm scripts resolve anything in the .bin automatically. so you could just have:
"start": "webpack-dev-server --content-base app"
I'm have an issue with reloading once I've set up the webpack-dev-server. When the dev-server is running and I add the console.log(ngModule) line to my code save it and refresh the browser the changes never get picked up. After fussing with it for about an hour I decided to download from github your code and switched to the finished/intro branch and tried the same thing, but still couldn't get webpack-dev-server to pick up the change after it was already started. The only way I can get it to pick up the changes is by restart webpack-dev-server. Do you have any ideas as what would be causing this. I'm on a windows 7 pc running webstorm 11.0.1. Also, I did do your tutorial on the basic webpack intro where everything is in node's route (./) and not and any sub folders and it was able to pick up the changes that way. Not sure if that's helpful. Any advice would be appreciated.
Huh, that's odd. I'd recommend you reach out to the webpack support channels to see if they can help you there. Good luck!
Found the solution. For windows users you have to use absolute path in the config file.
I'm probably being stupid here but i cannot get webpack to fire up just by typing 'webpack' into the terminal. Did you miss out a step or am i missing something myself?
I had the same problem, I just installed globally and it worked just fine. npm install webpack -g
I was having trouble running npm start, had to remove the "node node_modules/.bin/" portion from the package.json script. Just "start": "webpack-dev-server --content-base app", worked fine. Hope it helps someone (ps: i'm on windows).
You might want to include the windows code for the
npm start and
npm build since both provided examples on github only work on unix based systems. At least as commented out code on the repo.
Hi, I'm running Webpack with angular-i18n and angular-dynamic-locale. Issue is that when I build the project for distribution, the localization for the time is not loading correctly. Everything is loading into the browser and the dist folder correctly (so no files are missing), but the locale is not changing the time to the correct format. It's working fine in development however.
Any thoughts on best practices for this?
My webpack.config.js is loading the .js files as follows:
test: /angular-locale_.+js$/, loader: 'file-loader?name=[path][name].[ext]?[hash]'
When I run my start script and load my page, I get an error that require is not defined. What am I missing?