Validate your Webpack config with webpack-validator

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

Note: Webpack 2 now has validation baked in.

Christopher
Christopher
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

I answer this and more questions in a recent blogpost

Rolando Barbella
Rolando Barbella
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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 😃

Rolando Barbella
Rolando Barbella
~ 5 years ago

Amazing! Thanks a lot Kent!

Tey Taghiyev
Tey Taghiyev
~ 5 years ago

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.

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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

Dean
Dean
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

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!

Tomáš Duda
Tomáš Duda
~ 5 years ago

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.

Holly Mother
Holly Mother
~ 4 years ago

webpack-validator is useful for webpack 1.x, but not for 2.x

Holly Mother
Holly Mother
~ 4 years ago

webpack-validator is useful for webpack 1.x, but not for 2.x

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

Correct. That's why there's a note in the description:

Note: Webpack 2 now has validation baked in.

Kalan Chen
Kalan Chen
~ 4 years ago

FYI, webpack-validator doesn't support webpack2 because it has built-in validation.

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

This is noted in the lesson description:

Note: Webpack 2 now has validation baked in.

Manjit Kumar
Manjit Kumar
~ 4 years ago

Hi Kent C.,

I am new to egghead.io and webpack. Please forgive me if my query doesn't make a sense or is not following the rules of this forum.

I wanted to know about this inbuilt validation, I looked up into webpack's docs and their Github readme and couldn't find anything useful. Can you point me to something where I can read about the usage of this new feature so I can start using it for validating my webpack conf using webpack2.

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

Hi! Welcome! The cool thing is that you don't actually have to do anything at all! It'll just validate your config for you :) Good luck!

Peter Simmons
Peter Simmons
~ 4 years ago

NB: web pack now includes a validator by default and actually warns you to uninstall this package.

Thomas Hodges
Thomas Hodges
~ 4 years ago

I got an error that with webpack2 validation was built in and I was meant to uninstall webpack-validator. When I do that and run the same scripts (that depend on webpack-validator) the scripts fail. What am I meant to do here?

Thomas Hodges
Thomas Hodges
~ 4 years ago

(presently I'm using webpack2-validate, but I don't know if this is the solution that is best considering a validator is apparently built in)

Brian
Brian
~ 4 years ago

I'm sorry but I forked the the repo but I don't have the code version like this video. It's everything working. How can i get the same repo?

Tapan
Tapan
~ 4 years ago

It seems like webpack-validator is deprecated. Makes sense to remove this video ?

yarn run v1.3.2
$ webpack-validator webpack.config.js
Reading: webpack.config.js
......../node_modules/webpack-validator/dist/index.js:146
    throw new Error('It looks like you\'re using version 2 or greater of webpack. ' + 'The official release of 2 of webpack was released with built-in validation. ' + 'So webpack-validator does not support that version. ' + 'Please uninstall webpack-validator and remove it from your project!');
    ^

Error: It looks like you're using version 2 or greater of webpack. The official release of 2 of webpack was released with built-in validation. So webpack-validator does not support that version. Please uninstall webpack-validator and remove it from your project!