pnp-webpack-plugin

What is pnp-webpack-plugin?

The pnp-webpack-plugin is a plugin for Webpack that enables Webpack to resolve modules using Plug'n'Play (PnP) API, which is a feature of Yarn. This allows for faster and more reliable module resolution by eliminating the need for node_modules directories.

What are pnp-webpack-plugin's main functionalities?

Basic Setup

This code demonstrates the basic setup of pnp-webpack-plugin in a Webpack configuration. It adds the PnpWebpackPlugin to the resolve and resolveLoader plugins arrays, enabling Webpack to use the PnP API for module resolution.

const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = {
  resolve: {
    plugins: [PnpWebpackPlugin],
  },
  resolveLoader: {
    plugins: [PnpWebpackPlugin.moduleLoader(module)],
  },
};

Custom Module Resolution

This code shows how to use pnp-webpack-plugin to create custom module resolution aliases. The resolveRequest method is used to resolve the path to 'my-package' and create an alias 'my-alias' for it.

const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = {
  resolve: {
    plugins: [PnpWebpackPlugin],
    alias: {
      'my-alias': PnpWebpackPlugin.resolveRequest('my-package', __dirname),
    },
  },
};

Integration with Babel Loader

This code demonstrates how to integrate pnp-webpack-plugin with Babel loader. The moduleLoader method is used to configure the Babel loader to use the PnP API for resolving modules.

const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: PnpWebpackPlugin.moduleLoader(module),
      },
    ],
  },
};

Other packages similar to pnp-webpack-plugin

enhanced-resolve

Enhanced-resolve is a powerful and flexible module resolution library used by Webpack. It provides advanced features for resolving modules, such as custom plugins and aliasing. Unlike pnp-webpack-plugin, it does not specifically target the PnP API but offers a more general solution for module resolution.

ts-pnp

Ts-pnp is a TypeScript plugin that enables TypeScript to resolve modules using the PnP API. It is similar to pnp-webpack-plugin but is specifically designed for TypeScript projects. It allows TypeScript to work seamlessly with Yarn's PnP feature.

babel-plugin-module-resolver

Babel-plugin-module-resolver is a Babel plugin that allows custom module resolution paths. It provides similar functionality to pnp-webpack-plugin but is focused on Babel's module resolution rather than Webpack's. It is useful for projects that rely heavily on Babel for transpilation.

README

Plug'n'Play resolver for Webpack

This plugin is also available for Jest (jest-pnp-resolver), Rollup (rollup-plugin-pnp-resolve), and TypeScript (ts-pnp)

Installation

yarn add -D pnp-webpack-plugin

Usage

Simply add the plugin to both the resolver and resolveLoader:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  resolve: {
    plugins: [
      PnpWebpackPlugin,
    ],
  },
  resolveLoader: {
    plugins: [
      PnpWebpackPlugin.moduleLoader(module),
    ],
  },
};

The resolve entry will take care of correctly resolving the dependencies required by your program, and the resolveLoader entry will help Webpack find the location of the loaders on the disk. Note that in this case, all loaders will be resolved relative to the package containing your configuration.

In case part of your configuration comes from third-party packages that use their own loaders, make sure they use require.resolve - this will ensure that the resolution process is portable accross environments (including when Plug'n'Play isn't enabled), and prevent it from relying on undefined behaviors:

module.exports = {
  module: {
    rules: [{
      test: /\.js$/,
      loader: require.resolve('babel-loader'),
    }]
  },
};

ts-loader integration

This plugin as an integration to easily add support for TypeScript in your applications through ts-loader. In order to do this, just do the following:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  module: {
    rules: [{
      test: /\.ts$/,
      loader: require.resolve('ts-loader'),
      options: PnpWebpackPlugin.tsLoaderOptions(),
    }],
  },
};

If you have any options you want to pass to ts-loader, just pass them as parameter of the tsLoaderOptions function and it will take care of forwarding them properly.

License (MIT)

Copyright © 2016 Maël Nison

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.