This is the main scripts package of wpack.io tool.
Please refer to the readme of this repo for usage instruction.
What is wpack.io?
It is a fine-tuned webpack/browser-sync configuration made specifically for WordPress Theme and Plugin Development.
- ✅ 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 for setting up your project.
- ❌ Doing a lot of configuration to setup webpack.
- ❌ 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.
- ❌ A lot of dependencies like babel, webpack loaders and what not.
What is supported out of the box
- 👉 Have Create React App like developer experience for WordPress Plugin/Theme development.
- 👉 Consume all the modern packages from npm registry.
- 👉 Automatically minify and bundle code with webpack.
- 👉 Split large files automatically and have PHP library to
wp_enqueue_scriptall 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).
Here are a few more bonus you get for using wpackio.
- 😎 Using ES6 Modules you will never run into namespace collision.
Remember when that third-party plugin was using that old version of
foolibrary which caused your system to completely fail? No more!.
- 😎 Zero configuration for a sane default of all the tooling involved (babel, sass, webpack).
- 😎 Your CSS/SCSS changes will reflect instantly.
- 😎 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!
Everything is documented in our website.
@wpackio/scriptsto a project by running this.and after thatnpx @wpackio/clinpm run bootstrap
- Edit the
wpackio/enqueuefrom composer to consume the assets.
- Start the server using
- Create production file using
npm run build.
How wpack.io solves the problems?
It doesn't concern itself with providing boilerplate or starter templates. It
assumes that you (the awesome developer
👨💻 || 👩💻) is already doing that and what you
want is a simple to configure, yet hackable to the core tooling for bundling
all your frontend assets (js, css, images, svgs) in the most optimized way and
make it work within your WordPress theme or plugin.
Keeping that in mind, wpack.io provides three dependencies for your projects:
@wpackio/entrypoint- As main dependency of your
@wpackio/scripts- As main dev dependency of your
wpackio/enqueue- As main dependency of your
The first handles all the tasks for building the assets and providing a damn good DX.
The second handles enqueuing the assets using WordPress' API (
Both the tools communicate with each other through the means of
file. The first tell the later which files to consume and the later
to the first.
For more information do check the official documentation.
This package has the same
npm scripts as this monorepo. These should be run
lerna run <script>. More information can be found under CONTRIBUTION.md.
build: Use babel to build for nodejs 8.6+. Files inside
srcare compiled and put under
lib. All type definitions are stripped and individual type declaration files are created.
lint: Lint all files using eslint.
test: Run tests on files using jest.