The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Validate your Webpack config with webpack-validator

Validate your Webpack config with webpack-validator

4:06
It’s quite common to make a mistake while developing your webpack configuration. A simple typo can cost you hours of development time. With [webpack-validator](http://npm.im/webpack-validator), you can save yourself a ton of time by validating that your webpack configuration is free of common mistakes. Note: Webpack 2 now has validation baked in.
Watch this lesson now
Avatar
egghead.io

It’s quite common to make a mistake while developing your webpack configuration. A simple typo can cost you hours of development time. With webpack-validator, you can save yourself a ton of time by validating that your webpack configuration is free of common mistakes.

Avatar
Steve Lee

oh, boy. That could have saved me a lot of wasted time! Will use from now on. More great value for egghead!!!!

In reply to egghead.io
Avatar
Christopher

Just a quick question regarding your editor. What is the pkg you are using with atom to allow for in-editor terminal?

Avatar
Kent C.

I answer this and more questions in a recent blogpost

In reply to Christopher
Avatar
Rolando

Hi Kent, I'm new to webpack, any idea why I'm getting this error ?

(function (exports, require, module, _filename, _dirname) { const {resolve} = require('path')
SyntaxError: Unexpected token {

*The error is pointing at the const{resolve} variable

Looks like he is not reading the ES6 syntax, I have Babel and all the dependencies.

node 5.8.0
npm 3.8.2
Linux

Avatar
Kent C.

Yeah, Node 5 doesn't have support for doesn't support destructuring. You could optionally name your config file webpack.config.babel.js and it'll get transpiled on the fly (like magic). Or just upgrade to Node 6 😃

In reply to Rolando
Avatar
Rolando

Amazing! Thanks a lot Kent!

In reply to Kent C.
Avatar
Tey

Solid intro, a question though. Validator complains that a sassLoader is not allowed in the config (https://github.com/jtangelder/sass-loader#sass-options) yet the actual attribute is perfectly fine. I noticed that you can give validator custom schemas, which I assume are made to handle this exact problem, but their examples are all using validation via JS and not CLI - How would I resolve this issue.

Avatar
Kent C.

Sure, see this but on customizing: https://github.com/js-dxtools/webpack-validator/blob/c9eea8d4142a329c09f0fd49ec0d411c4fe6ad4c/README.md#customizing
If you have further issues, file an issue in the repo

In reply to Tey
Avatar
Dean

Any Plans on adding a video on Hot Reloading with webpack 2, or integrating it with much of what you are teaching here?

In reply to Kent C.
Avatar
Kent C.

Hi Dean! I'm not sure whether I'll ever create a video for that or not. But I recently gave a Frontend Masters workshop about Webpack and I taught about HMR for that. Unfortunately it's not released yet, but you can find the slides (and other helpful resources) here. Good luck!

In reply to Dean
Avatar
Tomáš

webpack-validator isn't really needed anymore. From the README:

Note: webpack v2 has built-in validation for configuration. Due to this, webpack-validator is unlikely to make significant changes. While pull requests will be reviewed and can be merged, project maintainers are unlikely to put a lot of much effort into the maintenance of the project.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?