0 views collected around this technical thread.
This article provides an in‑depth overview of Webpack, covering its core concepts, entry and output settings, loaders, plugins, mode configurations, source‑map options, browser compatibility, and performance optimizations for both development and production environments.
This article compares React Router v5 and v6, highlighting v6’s new Routes component, simplified nesting, loader functions for pre‑render data fetching, error handling, permission checks, and integration with defer and Suspense, providing code examples and practical migration insights for frontend developers.
This article explores Webpack's core build process—from startup and compilation to module handling and asset emission—clarifies the execution sequence of loaders versus plugins, explains loader chaining mechanics, and discusses practical optimization techniques for improving build speed and bundle size.
This comprehensive, step‑by‑step guide walks developers through Webpack’s core concepts, project setup, configuration files, development server with hot module replacement, essential loaders for CSS, images, Less, and Babel, plus optimization techniques such as JavaScript minification, CSS extraction, and output cleaning.
This article explains what Webpack loaders are, their four classification types (pre, normal, inline, post), how to configure them with enforce, the inline loader prefixes, execution priority, the loader call chain, synchronous vs asynchronous handling, parameters, output, caching, and useful loader development tools.
This article explains the internal workflow of vue-loader, detailing how it separates style, script, template, and custom blocks in Vue single‑file components, injects a pitcher loader, clones webpack rules, and leverages resourceQuery to reuse user‑defined loaders such as less‑loader or babel‑loader.
This article introduces the Antd Icon Reduce plugin, explains the problem of oversized Ant Design icon bundles, details the design and implementation of a webpack loader and plugin that dynamically extracts used icons and modifies alias configuration, and provides installation and configuration instructions to achieve significant bundle size reduction.
This article explains step‑by‑step how to create, configure, and use custom synchronous and asynchronous Webpack loaders—including a console‑log remover and an ES6‑to‑ES5 transformer—covering project setup, loader implementation, options validation, source‑map generation, and loader resolution.
The article walks through configuring Webpack to build a multi‑page Vue application—showing why the default CLI SPA setup falls short, how to generate dynamic entry points, set output paths, apply loaders for JS, CSS, images, and use plugins such as MiniCssExtractPlugin, CopyWebpackPlugin and HtmlWebpackPlugin to produce separate bundles and HTML files for each page.
The article details Webpack’s loader execution pipeline, showing how a shared loaderContext is built for each module, how the loader‑runner pitches loaders in order, then processes the resource and runs each loader’s normal method from right to left, handling synchronous, Promise‑based, and async callbacks via runSyncOrAsync.
The article explains Webpack loader configuration by detailing rule definitions, inline loader syntax, the symbols that control loader inclusion, the internal parsing and matching process that groups pre, normal, and post loaders, and practical tips for ordering and debugging complex builds.
Webpack resolves every import by mapping the request string to an exact file path through a configurable chain of resolver plugins for normal modules, node_modules packages, and loaders, and developers can speed up builds by using aliases, limiting module directories, and keeping extensions short.
The article explains how to replace manual client‑specific logo and login‑background swaps with a custom Webpack merge‑less loader that injects client assets during build, offering low intrusiveness, strong extensibility, richer styling options, and a smoother developer experience compared to simple copy scripts.
This article explains what a Webpack loader is, how it works, how to configure single or multiple loaders in webpack.config.js, best‑practice guidelines, and provides a complete example of an html‑minify loader with both synchronous and asynchronous implementations.