Hello everyone,
This is my first post here and I would like to share a tooling I have been developing over past 2 weeks, which I believe would give a better Development Experience for WordPress developers.
Being a traditional WordPress developer myself, I know it can be a pain to setup all those webpack stuff for every new projects. On top of, if we were to leverage the advanced code-splitting of webpack, then somehow, we would need to enqueue all chunks in the entrypoint, set dynamicPublicPath for lazy loading (import('').then()) etc.
To make things easier, I came up with an idea of abstracting the build tooling inside one single scripts (much like react-scripts). This is the outcome so far.
And this is the repo.
swashata
/
wp-webpack-script
π₯π₯π¦π©βπ» An easy to use, pre configured, hackable webpack setup & development server for WordPress themes and plugins.
visit our website wpack.io for documentation and usage
wpack.io - Modern JavaScript tooling for WordPress
What is wpack.io?
Put simply, wpack.io is a nodejs based build tool to ease up using modern javascript in WordPress Themes and Plugins. It gives a fine Developer Experience (DX) and a single dependency for all your bundling requirement.
It is a fine-tuned webpack/browser-sync configuration made specifically for WordPress Theme and Plugin Development.
With the rise of Gutenberg editor, the usage of modern JavaScript and libraries like react is imminent. The goal of this tooling is to:
-
β Provide out of the box compiling and bundling of all front-end assets. -
β Give best in class Developer Experience (DX)- Hot Module Replacement and Live Reload.
- Compile files on save.
- Work on any local development server.
-
β Support modern and useful concepts like modules, tree-shaking, dynamic import etc.
and eliminate the pain points such as:
-
β Boilerplateβ¦
Some of the features are:
π Supports Hot Reloading, right out of the box.
π Dynamic PublicPath, generated by a WP based PHP class, so use import(), code-splitting all you want.
π Can work with any local server (vvv, wamp, mamp, docker).
π Webpack Multi-Compiler support.
π Hybrid of Browsersync and webpack dev and hot middleware, finest DX.
π Zero-config, ES6+, reactjs, Sass, typescript support.
I request, if you are interested in WordPress development, please give this a try. I have not published yet, so you would need to clone it (a bit of pain) and run the example.
You would need to have docker and preferably yarn.
git clone git@github.com:swashata/wp-webpack-script.git
yarn
yarn build
cd examples/plugin
docker-compose up -d && docker-compose logs -f wordpress
yarn exstart
I would very much like to have feedbacks before I finish up the first version π.
Top comments (0)