pnp-webpack-plugin
Advanced tools
Package description
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.
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),
},
],
},
};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 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 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)
yarn add -D pnp-webpack-plugin
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'),
}]
},
};
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.
FAQs
plug'n'play resolver for Webpack
The npm package pnp-webpack-plugin receives a total of 3,518,415 weekly downloads. As such, pnp-webpack-plugin popularity was classified as popular.
We found that pnp-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.