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.

Apr 2, 2025

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 and found the answer.

Apr 2, 2025

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 new domain or a global window property, avoiding manual edits across repos. Sometimes the requirement isn’t about domains. A colleague recently asked to rename variables in code automatically. For example, rename T_PROJECT to P_PROJECT. I updated the plugin to support automatic variable renaming.

Feb 14, 2025

Handling Browser Compatibility in Vite

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

Feb 7, 2025

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.

Aug 25, 2024

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 important notes about content hashes.

Jun 30, 2024

Understanding Makefile

This article introduces Makefile, including its advantages, implementation details, and related information to help improve efficiency when using Makefile.

Jul 24, 2022

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 usage.

Apr 23, 2022

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.

Jan 25, 2022

Bulk-Replacing Domains in a Frontend Codebase

This article introduces how to bulk-replace domain names in frontend code, including usage scenarios and implementation details, to improve the efficiency of bulk domain replacement in frontend projects.

Dec 5, 2021

Understanding process.env.NODE_ENV

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

Dec 5, 2021

sideEffects in package.json

An explanation of the sideEffects field in package.json, including its purpose, usage patterns, and how it enables effective tree shaking in Webpack builds.

Jul 18, 2021

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 upgrade efficiently.

Mar 23, 2021

Introduction to Webpack HMR

An introduction to Webpack HMR, including its benefits, how it works, setup details for Angular/React/Vue, and references to help you use HMR effectively.

Sep 15, 2019

Splitting Frontend i18n Files

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

Jul 24, 2019

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 pitfalls.

May 26, 2019

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 options.

Oct 11, 2017

Angular Development - loadChildren Duplicate Path Issue

This article introduces the loadChildren duplicate path issue in Angular development, including advantages, implementation details, and related resources to help improve efficiency in solving Angular loadChildren duplicate path problems.

Sep 24, 2017

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 main chunk. This post explores how versioning of build tools can cause this and how to fix it.

Jul 22, 2017

JavaScript heap out of memory

This article introduces the JavaScript heap out of memory error, including its causes, solutions, implementation details, and related resources. These steps can help improve efficiency when dealing with memory issues.

Jul 22, 2017

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 content changes, including definitions, scenarios, and recommendations.

May 10, 2017