Development Tools Automating Your Development with webpack Dev Server

Ritchie Altamirano
PRO
Ritchie Altamirano
Pro Student 5,002 Points

Will this course be updated soon? All files are dated and have version issues when trying to follow along.

Working files keep throwing errors when trying to run npm install --save-dev webpack-dev-server.

Ritchie Altamirano
Ritchie Altamirano
Pro Student 5,002 Points
ritchieMFaltamirano:webpack-workshop raltamirano$ git checkout lesson-04-webpack-dev-server
Branch lesson-04-webpack-dev-server set up to track remote branch lesson-04-webpack-dev-server from origin.
Switched to a new branch 'lesson-04-webpack-dev-server'
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack-dev-server
npm WARN babel-loader@6.4.1 requires a peer of babel-core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.3 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.1.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack-dev-server@3.1.3
added 342 packages from 165 contributors and removed 11 packages in 13.882s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev babel-core
npm WARN webpack-dev-middleware@3.1.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.3 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ babel-core@6.26.0
added 11 packages from 4 contributors in 12.088s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install
npm WARN webpack-dev-middleware@3.1.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.3 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

up to date in 6.719s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack
npm WARN webpack-dev-middleware@3.1.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.3 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack@1.15.0
updated 1 package in 9.88s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack-dev-server
npm WARN webpack-dev-server@3.1.3 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.1.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack-dev-server@3.1.3
updated 1 package in 12.515s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack
ritchieMFaltamirano:webpack-workshop raltamirano$ 
ritchieMFaltamirano:webpack-workshop raltamirano$ 
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack@^4.0.0-beta.1
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack@4.5.0
added 113 packages from 87 contributors, removed 39 packages, updated 29 packages and moved 2 packages in 12.504s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack@^4.0.0
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack@4.5.0
updated 1 package in 10.082s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack-dev-server
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack-dev-server@3.1.3
removed 65 packages and updated 1 package in 10.063s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev ajv@^6.0.0
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ ajv@6.4.0
added 1 package from 1 contributor and updated 1 package in 8.656s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack@1
npm WARN webpack-dev-middleware@3.1.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.3 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack@1.15.0
added 57 packages from 64 contributors, removed 96 packages, updated 14 packages and moved 5 packages in 10.698s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install --save-dev webpack-dev-server
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@2.30.1 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.0.0 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@2.0.6 requires a peer of webpack@^2.2.0 || ^3.0.0 || ^4.0.0-alpha || ^4.0.0-beta || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack-dev-server@3.0.0
added 14 packages from 9 contributors, removed 107 packages, updated 7 packages and moved 9 packages in 12.429s
ritchieMFaltamirano:webpack-workshop raltamirano$ webpack -v
-bash: webpack: command not found
ritchieMFaltamirano:webpack-workshop raltamirano$ npm install
npm WARN deprecated nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/raltamirano/ritchies-git/sites/webpack-workshop/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.0.0 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@2.0.14 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

added 406 packages from 312 contributors in 18.2s
ritchieMFaltamirano:webpack-workshop raltamirano$ npm outdated
Package              Current  Wanted   Latest  Location
babel-loader           6.4.1   6.4.1    7.1.4  webpack-treehouse-example
css-loader            0.23.1  0.23.1  0.28.11  webpack-treehouse-example
html-webpack-plugin   2.30.1  2.30.1    3.2.0  webpack-treehouse-example
node-sass             3.13.1  3.13.1    4.8.3  webpack-treehouse-example
sass-loader            4.1.1   4.1.1    6.0.7  webpack-treehouse-example
style-loader          0.13.2  0.13.2   0.20.3  webpack-treehouse-example
webpack               3.11.0  3.11.0    4.5.0  webpack-treehouse-example
webpack-dev-server     3.0.0   3.1.3    3.1.3  webpack-treehouse-example
ritchieMFaltamirano:webpack-workshop raltamirano$ npm update all
ritchieMFaltamirano:webpack-workshop raltamirano$ npm upgrade all
ritchieMFaltamirano:webpack-workshop raltamirano$ npm outdated
Package              Current  Wanted   Latest  Location
babel-loader           6.4.1   6.4.1    7.1.4  webpack-treehouse-example
css-loader            0.23.1  0.23.1  0.28.11  webpack-treehouse-example
html-webpack-plugin   2.30.1  2.30.1    3.2.0  webpack-treehouse-example
node-sass             3.13.1  3.13.1    4.8.3  webpack-treehouse-example
sass-loader            4.1.1   4.1.1    6.0.7  webpack-treehouse-example
style-loader          0.13.2  0.13.2   0.20.3  webpack-treehouse-example
webpack               3.11.0  3.11.0    4.5.0  webpack-treehouse-example
webpack-dev-server     3.0.0   3.1.3    3.1.3  webpack-treehouse-example
ritchieMFaltamirano:webpack-workshop raltamirano$ npm update
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@4.1.1 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@2.0.14 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.3 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.1.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-treehouse-example@0.0.1 No repository field.
npm WARN webpack-treehouse-example@0.0.1 No license field.

+ webpack-dev-server@3.1.3
added 2 packages from 2 contributors, removed 16 packages and updated 6 packages in 16.75s
ritchieMFaltamirano:webpack-workshop raltamirano$ webpack
-bash: webpack: command not found

2 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 25,009 Points

Thanks for providing the errors.

ritchieMFaltamirano:webpack-workshop raltamirano$ webpack
webpack: command not found

webpack isn't a command you can just run. I'm assuming your package.json has some scripts in it, and webpack is one of them.

Try running:

npm run webpack
Ritchie Altamirano
Ritchie Altamirano
Pro Student 5,002 Points

Sorry, didn't mean to post that last part of the console, I know that won't work. The issue is with the npm WARN

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 25,009 Points

Right on. I recommend installing npm-check-updates. This will check your package.json for outdated packages and update them to the latest versions (rewriting your package.json). This differs from npm outdated and npm update.

Run it with the -nua flag (newest, update, all).

Also, dependency versions change on the daily, so I highly doubt they will update the workshop.

Brandon Little
Brandon Little
Pro Student 26,294 Points

npm-check-updates results in a "command not found" error