Version 6 of @wpackio/scripts has many improvements. While most of the changes are kept as backward compatible, some might break your project. So please take note of the followings. POSTCSS VERSION UPDATE postcss-loader has been updated to the very latest and now postcss is a peer dependency. So af…

Updating @wpackio/scripts and related toolchain is very straight forward and just like updating any other nodejs dependencies. First update the package by running or This will install the latest version. Now run the following command This will check for other updates necessary and install the lates…

wpackio depends on webpack to create the dev server and production build. It does provide a way to extend and override webpack configuration it creates. Since wpackio can operate in both single and multi compiler mode, we provide method to extend webpack configuration for each of the webpack compil…

By default @wpackio/scripts ignores all babel.config.js and .babelrc files and passes its own configuration to babel-loader. This works great for most of the projects. But you might want to pass custom babel configuration which is aware of tests or perhaps needs some other custom plugins. There are…

Due to reverse proxy nature of browser-sync, some things like WordPress Customizer and REST API may not behave correctly when opened from the proxy URL. This happens during development time only and has no side-effect on your production server. To fix it, add the following snippet in wp-content/mu-…

To enqueue with the wpackio/enqueue composer package, you need to do something like this. Now if you store the return value of enqueue, ($assets in the example), you will get the handle and URL of all the assets. Like Now the last item of each js and css arrays is the final handle where you would w…

wpack.io uses postcss-loader and thereby PostCSS. So we can take advantage of it to minify our CSS/SASS files during production builds. NOTE - wpackio-scripts only extracts CSS/SASS, doesn’t minify it. It is purposefully kept in the user-land because there are other options than cssnano. Install an…

This feature is available since v6.4.0 When you supply more than one file object to the files directive of wpackio.project.js, then wpackio starts webpack in multi compiler mode. This is useful for having separate dependency tree between separate parts of the project. There is also a feature to sta…

If you want to use file-loader for your custom assets, then there are some options you need to pass to make things work properly. To help you with that we have exposed a few nodejs APIs. The apis we need to use for file-loader are getFileLoaderOptions, issuerForNonStyleFiles, issuerForStyleFiles, f…

@wpackio/scripts has first-class support for both typescript and flow type. While flow works right out of the box there are some configuration needed for typescript. Provided tooling @wpackio/scripts comes with the build tooling for typescript, not typescript and webpack plugins. Also note that, we…

Let’s focus on an example where we use the great react hot loader to have the best in class DX when developing react app. It can be found in action under examples/plugin of the repo. Installation First install the dependency Modify wpackio project config From the documentation of react hot loader, …

SVGs are all the rage in today’s web. There are may ways, especially with webpack, to consume SVGs, that I felt, it is best to leave it to the user-land to decide which method to pick. Each of them has their purpose and depending on your project, you should decide which method (or combination of me…

If you are using jest to test your project, and ESLint for linting then you might want to add a babel.config.js file for uniform babel rules. Using Same rule without customization By default, @wpackio/scripts ignores any babel.config.js and .babelrc files. So even if you do put such files in your p…

If for some reason, you don’t want to use @wpackio/cli to bootstrap dependencies, then we have you covered too. First add the dependencies. NOTE: It needs to go into your project’s dependencies, not in devDepencencies. The reason is, it provides an entry-point (automatically inserted for you) which…

I created this tool in the hope that it will bring more WordPress developers to this crazy moving front-end world (crazy in all good way). With the tooling out of the way, you can actually focus on what matters, writing code. Here’s a list of tutorials and websites (some free and some paid, but I d…