[Webpack] Detect Unused Code with Webpack and unused-files-webpack-plugin

As you refactor and modify applications, it's difficult to manage and keep track of files as they become unused. Keeping this "dead" code around adds noise to your application and reduces clarity. Just as ESLint can tell us when variables become unused, Webpack (with the help of the unused-files-webpack-plugin) can tell us when entire files become unused. First, we'll install the plugin with npm and save it as a devDependency. Next, we'll use npm run scripts to build a new command that will run Webpack with the plugin. Finally, we'll learn how to use Webpack environment variables to conditionally add plugins to your Webpack config. By the end of the lesson, you'll have a useful cli command you can run to check for unused modules in your Webpack build

 

Install:

npm i -D unused-files-webpack-plugin

 

Update scripts:

"check-unused": "webpack --mode production --env.unused=true --display=errors-only",

 

Update webpack.config.js:

/* eslint-env node */
const UnusedFilesPlugin = require('unused-files-webpack-plugin').default;

module.exports = (env) => {
    const config = {
        entry: './src/index.js'
    };

    if (env && env.unused) {
        config.plugins = [
            new UnusedFilesPlugin({
                failOnUnused: true,
                patterns: ['src/*.js']
            })
        ]
    }

    return config;
};