1. 15
    Validate your Webpack config with webpack-validator
    4m 6s

Validate your Webpack config with webpack-validator

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

[00:00] There's an error in this config file. Go ahead and take a look and see if you can figure out what it is. If we run our build, we're going to get an error that is all together helpful. We simply get, "You're going to need a loader to handle this type of file." It's not helpful what the actual problem is. It looks like it's having a hard time loading CSS.

[00:20] If we look in our config, we can see, no. We have loader specified. What the problem is, is we have this modules which actually should simply be module. If we run the build again, then everything is going to work out just fine.

[00:35] It can be really frustrating to have these kinds of issues. Typos are common. There's a tool called webpack-validator that we can use to validate our configuration to ensure that there aren't any typos like this, and give us a little bit more of a helpful error message.

[00:50] Let me go ahead and add that mistake back in there. We'll save that. We're going to go ahead and run npm-install --save-dev webpack-validator. It's notable that webpack-validator actually does a lot more than just typo checking. It will ensure that the types that you're providing are correct and a myriad of other things specific to your webpack configuration that are useful. I definitely recommend that you use it.

[01:14] Now with that installed, we can go to our package.json, and we'll see that webpack-validator has been installed in our project. We're going to make a validate webpack script. Here, we'll do two versions, because there are actually two versions of our build, the dev build and the production build. If we run validate webpack:dev, we're going to use the webpack-validator binary that has been installed for us.

[01:41] Then, we'll specify our config, so webpack.config.js. Then, to make sure that we're simulating the same environment that our regular build, our development build environment is experiencing, we add the --env.dev.

[01:58] That will run our webpack config with that proper environment set. We'll be getting the webpack configuration for development. If we save that and run npm run validate webpack:dev, then we're going to get this handy error, "Modules is not allowed." That gives us exactly the place where we have the problem. We can go look up in the docs and find out that modules should actually be module.

[02:25] Let's go ahead and add another one of these, one for production. Then, we can run the prod version to make sure that we're getting the same error there. Finally, we want to add these validations to our validate script which we currently have running as a pre-commit hook.

[02:44] We'll go ahead and use npm run all, their API, which we simply can say the name of the script to validate webpack:* and that will run all of the validate webpack: scripts that we have. Now, if we run npm run validate, we're going to get that error twice, once for each validator.

[03:06] Let's go ahead and fix this problem, change this back to module. Then, if we run validate script again, we're going to get that the config is valid, because this is the validate script that's also going to run our test and linting. Now, everything has passed just fine.

[03:25] In review, all that we need to do to add webpack-validator is install it as a dependency. Then, we can use the webpack-validator CLI that it comes shipped with to validate our webpack config, providing the same environment that's used for our build and prod builds of our library over our application in this case.

[03:47] It's notable that there's also a node interface to webpack-validator where you can require webpack-validator, and then we could simply wrap our configuration inside of this. Because we're using the CLI already, I'll get rid of all this. That's how you use webpack-validator with webpack 2.

Christopher
Christopher
~ 6 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
~ 6 years ago

I answer this and more questions in a recent blogpost

Rolando Barbella
Rolando Barbella
~ 6 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
~ 6 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
~ 6 years ago

Amazing! Thanks a lot Kent!

Tey Taghiyev
Tey Taghiyev
~ 6 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
~ 6 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
~ 6 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
~ 6 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!

Avi Duda
Avi Duda
~ 6 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
~ 5 years ago

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

Holly Mother
Holly Mother
~ 5 years ago

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

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 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
~ 5 years ago

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

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

This is noted in the lesson description:

Note: Webpack 2 now has validation baked in.

Manjit Kumar
Manjit Kumar
~ 5 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
~ 5 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
~ 5 years ago

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

Thomas Hodges
Thomas Hodges
~ 5 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
~ 5 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
~ 5 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
~ 5 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!