npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

filepath-webpack-plugin

v5.0.1

Published

Simple plugin for checking paths length in your project

Downloads

8

Readme

npm version example workflow

Filepath Webpack Plugin

A simple plugin for checking paths length in your project.

This is a webpack plugin that checks your source code for long paths. It can be useful for projects that have deep nesting in their structure or have long file/folder names. This plugin will help to warn developers about too long paths before it caused an issue on other machines.

NOTE: for Webpack 4 support use version < 5.0.0.

Install

npm install --save-dev filepath-webpack-plugin
yarn add --dev filepath-webpack-plugin

Usage

The plugin will show a build warning if any path in your project exceeds the maximum length. Just add the plugin to your webpack config as follows:

webpack.config.js

const { FilepathPlugin } = require("filepath-webpack-plugin");

module.exports = {
  entry: "index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index_bundle.js",
  },
  plugins: [new FilepathPlugin()],
};

Options

You can pass configuration options to filepath-webpack-plugin. Allowed values are as follows:

| Name | Type | Default | Description | | --------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | maxPathLength | number | 200 | Maximum count of symbols allowed in the module's path. If path length will exceed this value - you will see a warning or an error depending on failOnError. Path length calculated relatively to the project root. | | failOnError | boolean | false | Identifies action that should be done if path doesn't satisfy rules: false - warning; true - will fail the build. |

Please take a look at the example of how to use options:

webpack.config.js

const { FilepathPlugin } = require("filepath-webpack-plugin");

module.exports = {
  entry: "index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index_bundle.js",
  },
  plugins: [
    new FilepathPlugin({
      maxPathLength: 50,
      failOnError: true,
    }),
  ],
};

Example of output that generated when a path does not satisfy rules:

terminal output

WARNING in FilepathPlugin
2 path(s) have more than 50 symbols.
Please make sure to reduce nesting or make folder and file names shorter:
[
  {
    "length": 89,
    "path": "./test/non-compliant/very-long-folder-name-that-wont-be-compliant-with-length-restriction"
  },
  {
    "length": 98,
    "path": "./test/non-compliant/very-long-folder-name-that-wont-be-compliant-with-length-restriction/other.js"
  }
]