webpack-import-plugins

Ensures load plugin from local webpack compatible with versions 4 and 5.

Motivation

Many plugins are composed with canonical plugins from the webpack module itself, the problem comes when require("webpack/lib/<NameOfPlugin>") is used inside a custom plugin which is expected to use the webpack version 4 and nodejs resolution algorithm tries to find the module in a hoisted file structure. Due the webpack-cli is execute at the root context, the module provided could be wrong if is expected to load the local webpack module:

Webpack cli uses import-local which ensures always use a the local instance of webpack, but in casuistics where the modules are hoisted, (such yarn workspaces) is where this kind of problems comes, https://github.com/sindresorhus/import-local/issues/7.

[email protected]
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

If there is a case where no-hoisted module has a webpack compiler, it will resolve webpack from the dep-tree directory.

Webpack 5 solve this using a instance of itself at the compiler instance, but many libraries are stil using webpack 4. ie: @storybook/react.

To solve this and keep the retrocompatibility, this module comes to solve this problem.

• Check this issue to dive in deep: https://github.com/jantimon/html-webpack-plugin/issues/1546

How to use it

Just import the library using require('webpack-import-plugins'), and call it with the name of plugin expected in webpack 5, this will check if there is a plugin factory available, or delegates to the custom module resolution.

The plugin name must be defined with the category prefix, if is required, you can check the categories in the webpack@5 internal plugins list or for lazyness use the local auto generated catalog file v4, v5.

Using importWebpackPlugins in webpack.config.js

const importWebpackPlugins = require('webpack-import-plugins');
const { node: { NodeTemplatePlugin } } = importWebpackPlugins();
// Or
const NodeTemplatePlugin = importWebpackPlugins().node.NodeTemplatePlugin;

module.exports = {
  plugins: [new NodeTemplatePlugin(...)];
}

Using importWebpackPlugins in a CustomPlugin

const importWebpackPlugins = require('webpack-import-plugins');

class CustomPlugin {
  constructor () {
    
  }

  apply(compiler) {
    const wpPlugins = importWebpackPlugins(compiler.webpack);
    const NodeTemplatePlugin = wpPlugins.node.NodeTemplatePlugin;
    const {
        LoaderTargetPlugin, 
        EntryPlugin, 
     } = wpPlugins;
    // and use it!
    new NodeTemplatePlugin(...);
  } 
}

Typing

Typing is allowed and extracted from the original webpack plugins.

Bonus track

Gets the version of the local webpack

const { resolveWepack } = require('webpack-import-plugins');
const webpackVersion = () => {
  const { version } = require(resolveWebpack('package.json'));
  return version;
};

References

• https://github.com/jantimon/html-webpack-plugin/issues/1546
• https://github.com/jantimon/html-webpack-plugin/pull/1547