Extending webpack configuration

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…

Read More

Make Customizer and REST API Work with development server

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-…

Read More

Adding custom babel configuration to your project

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…

Read More

Localize scripts enqueued with PHP API

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…

Read More

Minimize CSS files with cssnano

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…

Read More

Safely using file-loader

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. S…

Read More

Adding Typescript to your project

@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…

Read More

Using React Hot Loader with wpack.io

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, …

Read More

Using various SVG Loaders

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…

Read More

Using Jest and ESlint with babel

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…

Read More

Manually add node dependencies

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…

Read More

Level up your JavaScript (Front-End) Skills

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…

Read More