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 compiler. The extend option is actually accepted through the files property of project config. Extending through files property As written in the project-configuration section, files is what defines different entry-point of your project and decides whether webpack should be run in single compiler mode or multi-compiler mode (without any compromise). A typical files entry may look like this: wpackio.project.js As you might have guessed, we patch through webpackConfig to extend configuration. Extend with Object Put overriding webpack configuration object and it will be merged with webpack merge. Extend with function Even more flexibility can be obtained by using a callback function. It has the following signature. So it will take four parameters: webpackConfig (Object) : What the system has generated as your webpack config. webpackMergeApi (Function): The webpack merge instance for direct usage. appDir (string): Directory inside outputPath where all the assets are to be emitted. isDev (boolean) : Whether the operation is going for development mode or production build. And it should return a valid webpack configuration object. An example could be Word of caution The consumer PHP library, publicPath, development server and many internals actually depend upon the proper structuring of entry, output and publicPath of webpack configuration. If you override those, then the system may not work correctly. In most of the situations, you would actually want to add more loaders or modify existing loaders. Feel free to do that by changing config.module.rules and you should be good to go.

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 two safe approach to do this. Using project config If your babel configuration is only needed for @wpackio/scripts and not any other tooling (like jest), then you should be able to use the project configurations. You will need to use babelPresetOptions and babelOverride options to pass in custom values directly to @wpackio/scripts. Using custom babel.config.js If you need shared babel config between @wpackio/scripts and some other tool, then create a babel.config.js file in the your project root. Now edit wpackio.project.js file and put Now @wpackio/scripts will not pass any options to babel-loader and it will fallback to your own babel.config.js file. Note that when doing this, you will lose the built-in abilities for react, typescript etc. Because internally @wpackio/scripts passes the needed babel options to babel-loader to parse and compile those files. However you can easily achieve the same with the getBabelPresets node.js API. Your babel.config.js file may look like this. Do keep in mind that you will have to pass in options like hasReact, hasFlow etc again because @wpackio/scripts does not manage this file.

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-plugins/wpackio-fix.php of your local development server. This is for your development server only. DO NOT add it to your production server.

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 want to attach localize_script. So something like The same concept is true for getAssets, enqueue and register methods.

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 and use cssnano cssnano is a postcss based minify and optimizer for CSS. To use it, first we add it to our project’s devDependency. or with yarn Edit postcss.config.js file When you install wpackio a postcss.config.js file is created for you. Edit it and replace it’s content with Save it and you are good to go. Note that only when you run npm run build, the CSS files will be minified. It is not minified during npm start (development mode) to keep things fast. It is actually controlled from the postcss.config.js file itself, hence we add it conditionally in if (process.env.NODE_ENV === 'production').

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. Say we want to load svg files with file-loader, for both JS/TS and CSS modules. Here’s what the wpackio.project.js would look like. Notice the use of getFileLoaderOptions inside the callback function. For style type files, where the asset URL will come relative, it is necessary to pass the third parameter as true.

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 use babel 7 to compile typescript and Fork TS Checked Webpack Plugin to show type-errors during build/development time. So there are some gotchas. What doesn’t work As explained in microsoft blog the following doesn’t work when using babel to compile typescript. namespaces. bracket style type-assertion/cast syntax regardless of when JSX is enabled (i.e. writing <Foo>x won’t work even in .ts files if JSX support is turned on, but you can instead write x as Foo). enums that span multiple declarations (i.e. enum merging). legacy-style import/export syntax (i.e. import foo = require(...) and export = foo). So keep these in mind. Installing dependencies First we need to install typescript itself. Now create tsconfig.json at the root according to your need. Here’s a sample. Having moduleResolution and isolatedModules is a good idea, cause you won’t accidentally use something that isn’t supported. Usage Now simply define .ts or .tsx file in your wpackio.project.js file as entry-point. Now you are good to go. The compiler will also show any ts error you might have. NOTE - Internally wpack.io depends on fork-ts-checker-webpack-plugin to show type errors during build time. So make sure you install it, otherwise it will not work. Optimization By default @wpackio/scripts will create an instance of fork-ts-checker-webpack-plugin if a tsconfig.json is found in the current project root. The same plugin would go into all multi-entry compiler instances and would enable typechecking for all entries. Sometimes, this could not be the desired feature. For instance, you might have a plain JS app, alongside a TS app and you don’t want the typechecker for the JS app. Luckily it is not possible to explicitly disable typechecking for individual file entry using hasTypeScript. Furthermore, due to the nature of TypeScript, you might notice duplicate error reports across multiple files entry. This can also be remedied using typeWatchFiles config variable. Under your FileConfig add the hasTypeScript option. Below is an example of two apps, one explicitly disabling the typecheck. wpackio.project.js

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, it states that we need to add a plugin to babel-loader. For that, let’s hack into webpack config using jsBabelOverride from wpackio.project.io. wpackio.project.io This would instruct wpackio to extend babel-loader options and include the babel plugin provided by react-hot-loader. Customize our App Let’s say we have src/app/main.jsx as our primary entry-point. It has the following code. Here the App.jsx is the main react application. So let’s edit src/app/App.jsx file and modify the content. Now make changes and see it load live without page refresh. React HMR

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 methods) to use. Webpack Inline SVG Loader This one is from official webpack contrib.. It simply inlines the SVG within your code and gives you a string representing the SVG (XML) code. Configure First install the dependency Now edit your wpackio.project.js file and modify webpackConfig of files array. wpackio.project.js SVGO Loader A loader for webpack to pass your SVG files through svgo optimizer. It needs to work with either file-loader or url-loader. Configure First install the dependency Now edit your wpackio.project.js file and modify webpackConfig of files array. wpackio.project.js svgr webpack loader This one is specific for react. It transforms SVGs into react components. Configure First install the dependency Now edit your wpackio.project.js file and modify webpackConfig of files array. wpackio.project.js There are may other ways to configure svgr. Be sure to check their documentation. The things to watch here are We disable babel-loader from @svgr/webpack and use babel-loader manually with @wpackio/scripts API. We use @svgr/webpack only for JS/TS files using the issuer option along with issuerForNonJsTsFiles and issuerForJsTsFiles APIs.

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 project root, those will be picked up by Jest or ESLint, but not by @wpackio/scripts. In small use cases, this is perhaps the intended feature. In this case, create a babel.config.js file in the root of your project and put the following code. babel.config.js The above will create same babel rule for jest and eslint as used internally by @wpackio/scripts. Override @wpackio/scripts rules If you want to completely remove any babel rule set by @wpackio/scripts and would only want to use one single babel.config.js instead, do the followings. Instruct @wpackio/scripts to not pass any rule to babel-loader Edit your wpackio.project.js file and put Now this will remove all rules from babel-loader for both javascript and typescript files. So it will pick your own babel.config.js file. Now go ahead and write your custom babel.config.js file making sure it matches your project requirements. From now on, all tools including Jest, ESLint and @wpackio/scripts will follow the same config. For more information, do read the custom babel configuration tutorial.

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 handles the dynamic publicPath for webpack. Now add devDepencencies. You will need it only if you are using Sass. Now create the following files and edit the contents. wpackio.project.js wpackio.server.js postcss.config.js .browserslistrc Also edit your package.json and put the following in scripts. Now you are ready to go. From here on, follow the guide on Bootstrap.

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 don’t get paid if you subscribe 😜) I have found extremely useful. You don’t know JS (I am not saying to you, it’s the name of the book) - https://github.com/getify/You-Dont-Know-JS Courses by Wesbos - https://wesbos.com/courses/ Courses by Dylan C. Israel - https://scrimba.com/@PizzaPokerGuy Courses by Kent C. Dodds - https://egghead.io/instructors/kentcdodds Journal by my friend Saikat - https://github.com/saikatdas0790/tech-learning-journal/blob/master/2018/2018.md Might help you get started 😃. So thank you for reading and all the best with your journey of becoming a great front-end (full stack, given we already know WordPress & PHP 😉) developer.

Read More