{"id":14954966,"url":"https://github.com/swashata/wp-webpack-script","last_synced_at":"2025-04-13T23:49:15.583Z","repository":{"id":40910571,"uuid":"149424832","full_name":"swashata/wp-webpack-script","owner":"swashata","description":"💥🔥📦👩‍💻 An easy to use, pre configured, hackable webpack setup \u0026 development server for WordPress themes and plugins.","archived":false,"fork":false,"pushed_at":"2025-04-09T08:11:08.000Z","size":49101,"stargazers_count":411,"open_issues_count":48,"forks_count":59,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-12T09:34:47.119Z","etag":null,"topics":["babel","browser-sync","bundler","webpack","wordpress","wordpress-development"],"latest_commit_sha":null,"homepage":"https://wpack.io","language":"TypeScript","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/swashata.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"swashata","open_collective":"wpackio"}},"created_at":"2018-09-19T09:20:45.000Z","updated_at":"2025-03-15T10:39:26.000Z","dependencies_parsed_at":"2023-09-23T14:35:44.338Z","dependency_job_id":"a01ff2ea-d807-4bf8-8c34-ba23db7d1c5b","html_url":"https://github.com/swashata/wp-webpack-script","commit_stats":{"total_commits":1502,"total_committers":8,"mean_commits":187.75,"dds":0.3781624500665779,"last_synced_commit":"73e1702f1545dc42f5a4426c51dd20b9e7c92129"},"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fwp-webpack-script","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fwp-webpack-script/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fwp-webpack-script/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swashata%2Fwp-webpack-script/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swashata","download_url":"https://codeload.github.com/swashata/wp-webpack-script/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799782,"owners_count":21163398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","browser-sync","bundler","webpack","wordpress","wordpress-development"],"created_at":"2024-09-24T13:10:18.799Z","updated_at":"2025-04-13T23:49:15.559Z","avatar_url":"https://github.com/swashata.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://wpack.io\"\u003e\u003cimg width=\"600\" src=\"https://raw.githubusercontent.com/swashata/wp-webpack-script/master/assets/wpackio-logo.png\"\u003e\u003c/a\u003e\u003cbr\u003e\n  visit our website \u003ca href=\"https://wpack.io\"\u003ewpack.io\u003c/a\u003e for documentation and usage\n\u003c/p\u003e\n\n# wpack.io - Modern JavaScript tooling for WordPress\n\n[![Backers on Open Collective](https://opencollective.com/wpackio/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/wpackio/sponsors/badge.svg)](#sponsors) [![Build Status](https://travis-ci.com/swashata/wp-webpack-script.svg?branch=master)](https://travis-ci.com/swashata/wp-webpack-script) [![codecov](https://codecov.io/gh/swashata/wp-webpack-script/branch/master/graph/badge.svg)](https://codecov.io/gh/swashata/wp-webpack-script) [![npm version](https://badge.fury.io/js/%40wpackio%2Fscripts.svg)](https://badge.fury.io/js/%40wpackio%2Fscripts) [![npm download](https://img.shields.io/npm/dt/@wpackio/scripts.svg?label=downloads)](https://www.npmjs.com/package/@wpackio/scripts) [![cypress dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/#/projects/r3p1vm/runs)\n\n## What is wpack.io?\n\nPut simply, wpack.io is a nodejs based build tool to ease up using modern javascript\nin WordPress Themes and Plugins. It gives a fine _Developer Experience_ (DX) and\na single dependency for all your bundling requirement.\n\n\u003e It is a fine-tuned webpack/browser-sync configuration made specifically for\n\u003e WordPress Theme and Plugin Development.\n\nWith the rise of Gutenberg editor, the usage of modern JavaScript and libraries\nlike react is imminent. The goal of this tooling is to:\n\n-   ✅ Provide out of the box compiling and bundling of all front-end assets.\n-   ✅ Give best in class Developer Experience (DX).\n    -   Hot Module Replacement and Live Reload.\n    -   Compile files on save.\n    -   Work on any local development server.\n-   ✅ Support modern and useful concepts like modules, tree-shaking, dynamic import etc.\n\nand eliminate the pain points such as:\n\n-   ❌ Boilerplate for setting up your project.\n-   ❌ Doing a lot of configuration to setup webpack.\n-   ❌ A lot of things to hook webpack with browsersync. We can not safely have webpack dev server because it doesn't reload for PHP files.\n-   ❌ A lot of dependencies like babel, webpack loaders and what not.\n\n## What is supported out of the box\n\n-   👉 Have Create React App like developer experience for WordPress Plugin/Theme development.\n-   👉 Consume all the modern packages from [npm registry](https://npmjs.com).\n-   👉 Write javascript with modern ES2018 (ES6+) syntax and compile it down to ES5 (or in accordance to your `.browserslistrc`).\n-   👉 Automatically minify and bundle code with [webpack](https://webpack.js.org).\n-   👉 Split large files automatically and have PHP library to `wp_enqueue_script` all generated parts.\n-   👉 Use SASS/SCSS language to create stylesheets.\n-   👉 Use postcss autoprefixer to automatically make your CSS work with needed vendor prefixes.\n-   👉 Implement all the above to your existing wamp, mamp, vvv (basically any) dev server.\n-   👉 Create production grade, super optimized and minified files with one command (hello CI).\n\nHere are a few more bonus you get for using wpackio.\n\n-   😎 Using [ES6 Modules](https://scrimba.com/p/p4Mrt9/c9kMkhM) you will never run into namespace collision.\n    \u003e Remember when that third-party plugin was using that old version of `foo` library which caused\n    \u003e your system to completely fail? No more!.\n-   😎 Zero configuration for a sane default of all the tooling involved (babel, sass, webpack).\n-   😎 Your CSS/SCSS changes will reflect instantly.\n-   😎 [Typescript](https://www.typescriptlang.org/) and [Flowtype](https://flow.org/) to take your js carrier to the next level. This tooling itself is written in typescript 😉.\n-   😎 All the stuff you need to start developing using [react](https://reactjs.org/). Hello Gutenberg!\n\n## Getting Started\n\nEverything is documented in our [website](https://wpack.io).\n\n#### TL;DR\n\n-   Add `@wpackio/scripts` to a project by running this.\n    ```bash\n    npx @wpackio/cli\n    ```\n    and after that\n    ```bash\n    npm run bootstrap\n    ```\n-   Edit the `wpackio.project.js` file to write your javascript entry-points.\n-   Use `wpackio/enqueue` from [composer](https://packagist.org/packages/wpackio/enqueue) to consume the assets.\n-   Start the server using `npm start`.\n-   Create production file using `npm run build`.\n\n## How wpack.io solves the problems?\n\nBehind the scene wpack.io uses [webpack](https://webpack.js.org/) along with\n[browsersync](https://browsersync.io/).\n\nIt doesn't concern itself with providing boilerplate or starter templates. It\nassumes that **you** (the awesome developer `👨‍💻 || 👩‍💻`) is already doing that and what you\nwant is a simple to configure, yet hackable to the core tooling for bundling\nall your frontend assets (js, css, images, svgs) in the most optimized way and\nmake it work within your WordPress theme or plugin.\n\nKeeping that in mind, wpack.io provides three dependencies for your projects:\n\n1. `@wpackio/entrypoint` - As main dependency of your `package.json`.\n1. `@wpackio/scripts` - As main dev dependency of your `package.json`.\n1. `wpackio/enqueue` - As main dependency of your `composer.json`.\n\nThe first handles all the tasks for building the assets and providing a damn\ngood DX.\n\nThe second handles enqueuing the assets using WordPress' API (`wp_enqueue_script`\nand `wp_enqueue_style`).\n\nBoth the tools communicate with each other through the means of `manifest.json`\nfile. The first tell the later which files to consume and the later `publicPath`\nto the first.\n\n## See it in action\n\nWe have examples inside [examples](./examples) directory of this repo. Each of\nthem has instructions in the readme file, so be sure to check out.\n\n### `npx @wpackio/cli`\n\nAdd wpack.io into any existing or new project. This command has to be run\nfrom within the project.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/swashata/wp-webpack-script/master/site/frontpage/steps/01-cli.gif\"\u003e\n\u003c/p\u003e\n\n### `npm run bootstrap` / `yarn bootstrap`\n\nBootstrap needed dependencies, dev dependencies according to the type of your\nproject. This command is enabled by `npx @wpackio/cli`.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/swashata/wp-webpack-script/master/site/frontpage/steps/02-bootstrap.gif\"\u003e\n\u003c/p\u003e\n\n### Setup JS entry-points\n\nTalking about example in [plugins](./examples/plugin), we setup the entry-points\nin **`wpackio.project.js`** file.\n\n```js\nmodule.exports = {\n\t// Project Identity\n\tappName: 'wpackplugin', // Unique name of your project\n\ttype: 'plugin', // Plugin or theme\n\tslug: 'wpackio-plugin', // Plugin or Theme slug, basically the directory name under `wp-content/\u003cthemes|plugins\u003e`\n\t// Used to generate banners on top of compiled stuff\n\tbannerConfig: {\n\t\tname: 'WordPress WebPack Bundler',\n\t\tauthor: 'Swashata Ghosh',\n\t\tlicense: 'GPL-3.0',\n\t\tlink: 'https://wpack.io',\n\t\tversion: '1.0.0',\n\t\tcopyrightText:\n\t\t\t'This software is released under the GPL-3.0 License\\nhttps://opensource.org/licenses/GPL-3.0',\n\t\tcredit: true,\n\t},\n\t// Files we need to compile, and where to put\n\tfiles: [\n\t\t// App just for showing react\n\t\t{\n\t\t\tname: 'reactapp',\n\t\t\tentry: {\n\t\t\t\tmain: ['./src/reactapp/index.jsx'],\n\t\t\t},\n\t\t},\n\t],\n\t// Output path relative to the context directory\n\t// We need relative path here, else, we can not map to publicPath\n\toutputPath: 'dist',\n\t// Project specific config\n\t// Needs react?\n\thasReact: true,\n\t// Needs sass?\n\thasSass: true,\n\t// Externals\n\texternals: {\n\t\tjquery: 'jQuery',\n\t},\n\t// Webpack Aliases\n\talias: undefined,\n\t// Show overlay on development\n\terrorOverlay: true,\n\t// Auto optimization by webpack\n\t// Split all common chunks with default config\n\t// \u003chttps://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks\u003e\n\t// Won't hurt because we use PHP to automate loading\n\toptimizeSplitChunks: true,\n\t// Usually PHP and other files to watch and reload when changed\n\twatch: 'inc/**/*.php',\n\t// Hook into babeloverride so that we can add react-hot-loader plugin\n\tjsBabelOverride: defaults =\u003e ({\n\t\t...defaults,\n\t\tplugins: ['react-hot-loader/babel'],\n\t}),\n};\n```\n\n### Setup PHP Library to consume build files\n\nNow we do\n\n```bash\ncomposer require wpackio/enqueue\n```\n\nto install [PHP Consumer Library](https://github.com/swashata/wpackio-enqueue).\nWe instruct it to load files the right way (using WordPress APIs like\n`wp_enqueue_script` and `wp_enqueue_style`).\n\n```php\n\u003c?php\n/*\nPlugin Name: WPackIo Sample\nPlugin URI: https://wpack.io\nDescription: A sample to demonstrate wpackio\nVersion: 0.1.0\nAuthor: Swashata Ghosh\nAuthor URI: https://swas.io\nText Domain: wpack-io\nDomain Path: /languages\n*/\n// Assuming this is the main plugin file.\n\n// Require the composer autoload for getting conflict-free access to enqueue\nrequire_once __DIR__ . '/vendor/autoload.php';\n\n// Do stuff through this plugin\nclass MyPluginInit {\n\t/**\n\t * @var \\WPackio\\Enqueue\n\t */\n\tpublic $enqueue;\n\n\tpublic function __construct() {\n\t\t// It is important that we init the Enqueue class right at the plugin/theme load time\n\t\t$this-\u003eenqueue = new \\WPackio\\Enqueue( 'wpackplugin', 'dist', '1.0.0', 'plugin', __FILE__ );\n\t\t// Enqueue a few of our entry points\n\t\tadd_action( 'wp_enqueue_scripts', [ $this, 'plugin_enqueue' ] );\n\t}\n\n\n\tpublic function plugin_enqueue() {\n\t\t// Enqueue the `main` entry from `reactapp` file entry.\n\t\t$this-\u003eenqueue-\u003eenqueue( 'reactapp', 'main', [] );\n\t}\n}\n\n\n// Init\nnew MyPluginInit();\n```\n\n### `npm start` / `yarn start`\n\nAfter configuring all entry-points and using the PHP library for consuming, we\nstart the development server.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/swashata/wp-webpack-script/master/site/frontpage/steps/05-start.gif\"\u003e\n\u003c/p\u003e\n\n##### HMR\n\nWe edit the files and with proper setup, we can see things load live, without\npage refresh. It is called, **Hot Module Replacement (_HMR_)**.\n\nIn the above image we see, we are changing the label of from `Todo App` to\n`Awesome todo`. The changes are reflected live on the page, without any page-reload.\n\n##### Stop Dev Server\n\nOnce done, we press \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003ec\u003c/kbd\u003e to stop it.\n\n### `npm run build` / `yarn build`\n\nNow we create production build.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/swashata/wp-webpack-script/master/site/frontpage/steps/06-build.gif\"\u003e\n\u003c/p\u003e\n\nOur plugin/theme is now ready to go live.\n\n## Learn more\n\nThis Readme is not an extensive source of documentation. Please visit our website\n[wpack.io](https://wpack.io) to learn more.\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/wpackio#backer)].\n\n---\n\n\u003ca href=\"https://opencollective.com/wpackio#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/tiers/backers.svg?avatarHeight=36\u0026width=890\"\u003e\u003c/a\u003e\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/wpackio#sponsor)]. (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/wpackio#sponsor)).\n\n---\n\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/wpackio/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/wpackio/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n","funding_links":["https://patreon.com/swashata","https://opencollective.com/wpackio"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswashata%2Fwp-webpack-script","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswashata%2Fwp-webpack-script","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswashata%2Fwp-webpack-script/lists"}