Deprecationwarning tapable.plugin is deprecated use new api on hooks instead

A deprecation warning!

The warning is telling you that the tapable plugin is deprecated and you should use the new API on hooks instead.

In Webpack 5, the tapable plugin has been replaced with a new API for hooks. The tapable plugin was used to tap into the Webpack compilation process and modify or extend its behavior. However, this plugin is no longer supported and will be removed in future versions of Webpack.

To fix the warning, you need to update your code to use the new API on hooks. Here are some general steps to help you do so:

1. Identify the hook: Determine which hook you were using in your code. Common hooks include compilation, module, chunk, moduleFactory, and normalModuleFactory.
2. Use the new API: Instead of using the tapable plugin, use the new API on hooks. For example, if you were using the compilation hook, you can use the compilation.hooks object to tap into the compilation process.
3. Update your code: Update your code to use the new API on hooks. This may involve rewriting your code to use the new hook API.

Here's an example of how you might update your code to use the new API on hooks:

// Before (using tapable plugin)
module.exports = {
  //...
  plugins: [
    new webpack.TapablePlugin({
      tap: (hookName, callback) => {
        if (hookName === 'compilation') {
          callback((compilation) => {
            // Do something with the compilation
          });
        }
      },
    }),
  ],
};

// After (using new API on hooks)
module.exports = {
  //...
  plugins: [
    {
      apply: (compiler) => {
        compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
          // Do something with the compilation
        });
      },
    },
  ],
};

By using the new API on hooks, you can continue to extend and modify the Webpack compilation process without relying on the deprecated tapable plugin.