Build Tools

Options for Compiling TypeScript

Quick comparison of tsc, ts-loader, and babel-loader for TypeScript builds—what they do and when to choose each.

· 1 min
Build Tools

Will There Be Webpack 6?

Webpack 5 has been out for a long time. Will there be a Webpack 6, or is Webpack exiting the stage? I checked the repo …

· 1 min
Build Tools

Webpack Plugin to Auto-Rename Variables

I previously built a webpack loader called domain-replace-loader to replace domains in frontend JS, e.g., swapping to a …

· 1 min
Build ToolsFrontend Development

Handling Browser Compatibility in Vite

Use the official Vite legacy plugin to target older browsers without managing Browserslist/Core-JS manually.

· 1 min
Build Tools

How Module Import Style Affects Bundle Size

Importing from lib vs. es vs. package root can change bundle size dramatically; why and how to choose.

· 1 min
Build Tools

Customizing Source Map Generation in Webpack

How to customize Source Map generation in Webpack, including when to enable it, how to exclude specific files, and …

· 1 min
Build Tools

Makefile Explained (Simple Guide)

This article introduces Makefile, including its advantages, implementation details, and related information to help …

· 1 min
Build Tools

Automatically Append Prefix/Suffix to Storybook Titles

How to auto-append component names to Storybook titles via a custom webpack loader, plus implementation details and …

· 2 min
Build Tools

Add Global Constants to a Frontend Project

Expose config from package.json into the built app via webpack DefinePlugin, with typing in TS and pitfalls to avoid.

· 1 min
Build ToolsTypeScriptFrontend Development

Bulk-Replacing Domains in a Frontend Codebase

This article introduces how to bulk-replace domain names in frontend code, including usage scenarios and implementation …

· 3 min
Build Tools

process.env.NODE_ENV Explained (Simple Guide)

Exploring process.env.NODE_ENV: origins, usage scenarios, and practical applications in frontend builds and Node.js …

· 1 min
Node.jsBuild Tools

sideEffects in package.json

An explanation of the sideEffects field in package.json, including its purpose, usage patterns, and how it enables …

· 2 min
Build ToolsNode.jsWebpackTree Shaking

Upgrading Webpack 4 to 5

An overview of upgrading from Webpack 4 to 5, including benefits, key changes, upgrade steps, and references to help you …

· 1 min
Build Tools

Webpack HMR Explained (Beginner's Guide)

An introduction to Webpack HMR, including its benefits, how it works, setup details for Angular/React/Vue, and …

· 4 min
Build ToolsReact

Splitting Frontend i18n Files

Split growing i18n JSON into multiple files and merge at build time with webpack, then load per locale.

· 3 min
ReactBuild Tools

Automating Blog Platform Deployment

CI/CD for a blog platform using Travis: build, rsync to VPS, restart services, plus tips for SSH keys, scripts, and …

· 3 min
Build ToolsDeployment & Operations

Fix "JavaScript heap out of memory" During Build

How to fix "JavaScript heap out of memory" during Angular/Webpack builds by increasing Node/V8 memory, with safer script …

· 1 min
Build ToolsNode.jsAngular

Angular Development - loadChildren Duplicate Path Issue

This article introduces the loadChildren duplicate path issue in Angular development, including advantages, …

· 1 min
Build ToolsAngular

Solving Lazy Loading Failures in Angular AOT Builds

When using AOT (Ahead-of-Time) compilation in Angular, lazy loading might fail silently, bundling everything into the …

· 2 min
AngularWebpackBuild Tools

JavaScript heap out of memory

This article introduces the JavaScript heap out of memory error, including its causes, solutions, implementation …

· 1 min
Node.jsBuild ToolsAngular

Webpack Build: File Hash Unchanged Despite Content Changes — Analysis and Fix

An analysis and fix for the issue where a Webpack build outputs files whose hash remains the same even though their …

· 2 min
Build ToolsJavaScript