Instructor: Here, we have a repo with a fairly standard setup using npm run scripts to build an application using webpack. If we run npm run build, we see that webpack will output a bundle. Our repo also has ESLint installed, which we can run by using npm run lint. No output means we're lint-free.
Here, we have an application with three modules, an index file that imports two other files to do its work. However, as we refactor it, it's easy to miss when pieces of code go unused. Thankfully, if we remove the call to world, ESLint will tell us the world is no longer used.
I can verify this by running npm run lint again and seeing that it now errors. If we remove the import, we're now lint-free. Although ESLint can tell us about an unused variable, it doesn't know that world JS was now completely removed from the bundle. We would need webpack to tell us which of our modules are completely unused and aren't being bundled.
We'd do this by first installing the unused file's webpack plugin. I'm using the -d command here to save it as a dev dependency. If we go back to package.json, we now see that it's installed. Next, we'll want to create an npm run script that will run this plugin. To do that, we'll create a command called "Check unused."
We'll use webpack and environment variables to say, "Unused is true." We'll run webpack in errors-only mode, which will only output something if there's an error. We can now head over to our webpack config to make use of this environment variable.
First, we'll import our plugin by requiring it. This is an ES6 module, so we'll need to use the default property. Next, we'll need to switch from exporting an object to exporting a function that returns an object. We'll conditionally use our environment variable to modify the config.
We'll say if env and env.unused. Then we'll want to define our plugins, which is an array, to contain a new, unused file plugin, which itself contains options.
The first option we'll want to use is fail on unused and set it to true. This will tell webpack to fail the build if there's an unused file rather than simply outputting the list of unused files. Second, we need to specify the patterns of where our source code is located. In this case, it's source*.js.
We could save that and then now run npm run check unused. We could see that it caused the webpack build to fail. If we now remove world.js and check unused again, we now see that it passes.