front-end tooling for WordPress themes & plugins

Promotion

WPEForm - No-code Drag-n-Drop WordPress Form Builder

Useful for payments, quotation, quizzes, conversations & user feedbacks of all kinds.

Check out to support my efforts (made by me).

πŸ”₯wpackio-scripts start (node)

wpack.io is a fine-tuned webpack/browser-sync configuration made specifically for WordPress Theme and Plugin Development. It gives a fine Developer Experience (DX) and a single dev dependency for all your javascript and css/sass/scss bundling requirements.

How do I use wpack.io?

Add @wpackio/scripts to your project

Add @wpackio/scripts to your project

npx @wpackio/cli

This command will install @wpackio/scripts to your project’s devDependencies. It will also create a package.json if necessary and will add a bootstrap script to your package.json.

It provides an on-boarding experience where you don’t need to worry about adding scripts and dependencies.

Bootstrap dependencies and configuration

Bootstrap dependencies and configuration

npm run bootstrap

Or, if using yarn

yarn bootstrap

This will create all the necessary files and install all additional dependencies you might need according to your project.

Configure JS entry-points

Configure JS entry-points

Now edit your newly generated wpackio.project.js file and put your javascript entry-points. An entry-point is the module which runs the final javascript code on browser. It can (and should) import other modules which has export-ed something.

webpack will automatically bundle all the dependencies together. For more information read the guide.

You can have multiple entry-point under the same entry, or have multiple file entry. More information can be found in the docs.

Consume scripts & styles with PHP

Consume scripts & styles with PHP

First install php helper library wpackio-enqueue with composer.

composer require wpackio/enqueue

We instruct it to load the files right way, using WordPress APIs like wp_enqueue_script and wp_enqueue_style.

Everything is taken care for you when you instantiate the API \WPackio\Enqueue.

Start development server

Start development server

npm start

Or if using yarn

yarn start

This will start the development server proxying your local WordPress server. Now you can have access to hot module replacement and live file watching. Just edit your files and see it live in the browser.

In the image, we see changing the heading is seen live in the browser. It is done through react-hot-loader. Do check out advanced concepts to learn how we have set that up.

Once done, press Ctrl + c to stop the server.

Build Production files

Build Production files

npm run build

Or if using yarn

yarn build

Now create production builds with this single command. By default @wpackio/scripts will optimize build, minify output and create source-maps in different files.

Create distributable zip file

Create distributable zip file

npm run archive

Or if using yarn

yarn archive

You may now want to create an installable .zip file for your theme or plugin. @wpackio/scripts makes it easy with one single command. Use it to readily deploy your plugin or theme to WordPress.org repository or to your server.

What can I do with wpack.io?

Do you always wanted to get into modern front-end development but was too worried with all the tooling involved? Well, I was too, and after spending over a year learning everything, I thought it is time WordPress has an awesome DX for front-end development too.

wpack.io is an attempt to overcome all the pain points from setting up proper tooling to make webpack work with WordPress.

  • πŸ‘‰ Have Create React App like Best In Class developer experience for WordPress Plugin/Theme development.
  • πŸ‘‰ Consume all the modern packages from npm registry.
  • πŸ‘‰ Write javascript with modern ES2018 (ES6+) syntax and compile it down to ES5 (or in accordance to your .browserslistrc).
  • πŸ‘‰ Automatically minify and bundle code with webpack.
  • πŸ‘‰ Split large files automatically and have PHP library to wp_enqueue_script all generated parts.
  • πŸ‘‰ Use SASS/SCSS language to create stylesheets.
  • πŸ‘‰ Use postcss autoprefixer to automatically make your CSS work with needed vendor prefixes.
  • πŸ‘‰ Implement all the above to your existing wamp, mamp, vvv (basically any) dev server.
  • πŸ‘‰ Create production grade, super optimized and minified files with one command (hello CI).
  • πŸ‘‰ Typescript and Flowtype to take your js carrier to the next level. This tooling itself is written in typescript.
  • πŸ‘‰ All the stuff you need to start developing using react. Hello Gutenberg!
  • πŸ‘‰ HOT MODULE REPLACEMENT(HMR) for CSS/SASS and supported javascript modules.
  • πŸ‘‰ Create directly installable .zip file.

How does wpack.io work?

Glad you asked. Behind the scene, wpack.io works on top of webpack and browser-sync.

It considers the fact that we serve files from WordPress, through wp_enqueue_* APIs and there could be multiple webpack compiled assets on the same page, coming from different plugins and themes.

Keeping it in mind and of course to provide a great DX, wpackio was made. If you would like to know more about the inner working and principles, please read the concepts.

Contribute to wpack.io?

First of all, ❀️ Thank You! This project exists because of people like you πŸ˜ƒ. Please read our guide at Github.

We also accept financial contributions. If wpack.io has made your WordPress development easier, consider a donation. As a thank you, all our sponsors will be listed on our website.

SPONSORS

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor on

BACKERS

Thank you to all our backers! πŸ™ Become a backer.

What's new?

πŸ“¦ VERSION 5

πŸš€ Support for React Fast Refresh.

Simply have hasReact: true in your project config and all your components will hot reload using react refresh plugin.

πŸš€ Start selective entries during development

If you have multiple entries inside files of project config, wpackio will start all of them when you do yarn start, running a multi compiler instance.

This could be slow and distracting when you are working on only one entry at a time. So now we have a new CLI parameter -e using which you can specify which entries to start.

yarn start -e 0

will start the first entry of your files array.

yarn start -e 0 2

will start the first and third entries of your files array.


Kindly see the roadmap for more info.