{"id":17678018,"url":"https://github.com/ctaylo21/webpack-plugin-boilerplate","last_synced_at":"2026-01-19T22:31:43.273Z","repository":{"id":41816286,"uuid":"132055546","full_name":"ctaylo21/webpack-plugin-boilerplate","owner":"ctaylo21","description":"A modern boilerplate for writing Webpack plugins","archived":false,"fork":false,"pushed_at":"2022-12-07T18:02:03.000Z","size":1597,"stargazers_count":2,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T20:27:30.940Z","etag":null,"topics":["babel","boilerplate","demo-plugin","eslint","jest","plugin","tapable","webpack","webpack-plugin-boilerplate","webpack4"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctaylo21.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-03T22:20:42.000Z","updated_at":"2020-12-11T19:03:25.000Z","dependencies_parsed_at":"2023-01-23T19:00:15.133Z","dependency_job_id":null,"html_url":"https://github.com/ctaylo21/webpack-plugin-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ctaylo21/webpack-plugin-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctaylo21%2Fwebpack-plugin-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctaylo21%2Fwebpack-plugin-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctaylo21%2Fwebpack-plugin-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctaylo21%2Fwebpack-plugin-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctaylo21","download_url":"https://codeload.github.com/ctaylo21/webpack-plugin-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctaylo21%2Fwebpack-plugin-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28587241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T20:45:59.482Z","status":"ssl_error","status_checked_at":"2026-01-19T20:45:41.500Z","response_time":67,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","boilerplate","demo-plugin","eslint","jest","plugin","tapable","webpack","webpack-plugin-boilerplate","webpack4"],"created_at":"2024-10-24T08:03:26.117Z","updated_at":"2026-01-19T22:31:43.251Z","avatar_url":"https://github.com/ctaylo21.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n  \u003c!-- PR's Welcome --\u003e\n  \u003ca href=\"http://makeapullrequest.com\" style=\"width: 50%\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\"\n      alt=\"PR's Welcome\" /\u003e\n  \u003c/a\u003e\n  \n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eWebpack Plugin Boilerplate\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  A webpack plugin boilerplate built for webpack 4.\n\u003c/div\u003e\n\n## Table of Contents\n- [Features](#features)\n- [Usage](#usage)\n- [Documentation](#documentation)\n- [Installation](#installation)\n- [Support](#support)\n\n## Features\n\nWhy use this boilerplate? It comes with a lot of features out of the box that will let you focus on writing webpack plugins.\n\n- __testable__: built with [jest](https://facebook.github.io/jest/) installed and ready to go. Also provides code coverage.\n- __compatible__: write cutting-edge javascript and [Babel](https://babeljs.io/) will compile it to a version that older browsers support\n- __consistent__: uses webpack's [eslint config](https://github.com/webpack-contrib/eslint-config-webpack) and [lint-staged](https://github.com/okonet/lint-staged) to run eslint on any .js files you commit.\n- __extensible__: simply replace boilerplate defaults and you have an npm package just waiting to be written.\n\n\n## Usage\n\n\u003eThis example code is already written in `src/index.js`. To see the demo plugin in action, you shouldn't need to write any new code. This is just a walkthrough of how it was written.\n\n### Writing The Plugin\n\nLet's say you want to create a webpack plugin called `DemoPlugin` that prints \"Hello World\" once webpack compilation is done (super useful!).\n\nTo do this, we will need to make sure our code fulfills a few important properties:\n\n1. It should be a class that is named the same as your plugin. In this case we will use `DemoPlugin`.\n2. It should have a class method `apply` that takes a `compiler` parameter. This compiler parameter is described in more details in the [compiler hook documentation](https://webpack.js.org/api/compiler-hooks).\n3. Inside the apply method, we will hook into the [done lifecycle hook](https://webpack.js.org/api/compiler-hooks/#done) and do our `console.log`.\n\nYour plugin's main file will be the `src/index.js` file. It should look something like this:\n\n```\nexport default class DemoPlugin {\n  constructor(options) {\n    this.options = options;\n  }\n\n  apply(compiler) {\n    compiler.hooks.done.tap('DemoPlugin', () =\u003e {\n      console.log('\\nHello world\\n');\n    });\n  }\n}\n```\nNotice we have used `compiler.hooks.done.tap` to tap into the `done` lifecycle hook. Our callback will now be called when webpack compilation step has been completed.\n\n### Building The Plugin\n\nNow we need to compile our plugin.\n\n```\nnpm run build\n```\nWe now have our built plugin files in the `/dist` directory. The main one we want to import is located in `dist/cjs.js`. When you publish your NPM module, this will be the file that gets imported since it's specified in our `package.json` file as our `main` file.\n\n\u003e For local development, you'll have to directly import the `cjs.js` to test your local changes.\n\n### Including The Plugin In Webpack\nNow, inside of your webpack configuration for your project, you can import and add your plugin to your plugins list.\n\n```\nconst DemoPlugin = require('./path/to/DemoPlugin/dist/cjs');\n\nmodule.exports = {\n  mode: 'development',\n  plugins: [\n    new DemoPlugin({}),\n  ],\n};\n```\n\nThe final step is to build your webpack project. In the output, you should see that the `DemoPlugin` was called after webpack finished compilation and printed \"Hello World\" to the console.\n\n\u003cp align=\"left\"\u003e\n  \u003cimg src=\"https://i.imgur.com/ZWWg13N.png\"\u003e\n\u003c/p\u003e\n\nAnd that's it! You now can work on adding some useful functionality to your plugin.\n\n**Important:** Don't forget to rebuild your plugin each time you make a change!\n\n## Documentation\n\nSee the [webpack plugin API Docs](https://webpack.js.org/api/plugins/) for a full description of webpack plugin API.\n\n## Installation\n\n1. Clone the repository into your \"DemoPlugin\" directory (replace DemoPlugin with your plugin name).\n\n    ```bash\n    git clone https://github.com/ctaylo21/webpack-plugin-boilerplate.git DemoPlugin \u0026\u0026 cd DemoPlugin\n    ```\n\n2. Remove the git repository, and then initialize a new one\n\n    ```bash\n    rm -rf .git \u0026\u0026 git init\n    ```\n\n3. Remove README and replace with your own\n\n    ```bash\n    rm README.md \u0026\u0026 touch README.md\n    ```\n\n4. Update `package.json` and install dependencies\n\n    ```bash\n    npm init \u0026\u0026 npm install\n    ```\n\n    Don't forget to update any relevant fields in the `package.json` file!\n\n5. Start coding!\n\n## Support\n\nIf you find any problems or bugs, please open a new [issue](https://github.com/ctaylo21/webpack-plugin-boilerplate/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctaylo21%2Fwebpack-plugin-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctaylo21%2Fwebpack-plugin-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctaylo21%2Fwebpack-plugin-boilerplate/lists"}