Tagged articles
29 articles
Page 1 of 1
NetEase LeiHuo UX Big Data Technology
NetEase LeiHuo UX Big Data Technology
Aug 15, 2023 · Frontend Development

Understanding React Router v6: Route Order, Nesting, Loaders, and Permissions

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.

React Routerloaderrouting
0 likes · 18 min read
Understanding React Router v6: Route Order, Nesting, Loaders, and Permissions
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 18, 2022 · Frontend Development

Deep Dive into Webpack Core Workflow, Loader/Plugin Execution Order, and Optimization Strategies

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.

Build Processloadermodule bundler
0 likes · 11 min read
Deep Dive into Webpack Core Workflow, Loader/Plugin Execution Order, and Optimization Strategies
Tencent Cloud Developer
Tencent Cloud Developer
Aug 30, 2022 · Frontend Development

Comprehensive Guide to Webpack: Core Concepts, Configuration, Loaders, and Optimization

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.

babeldev serverfrontend
0 likes · 15 min read
Comprehensive Guide to Webpack: Core Concepts, Configuration, Loaders, and Optimization
ELab Team
ELab Team
Dec 1, 2021 · Frontend Development

Build a Vue Click-to-VSCode Loader & Plugin: Step‑by‑Step Guide

Learn how to create a custom webpack loader and plugin that injects source‑code metadata into Vue components, enabling click‑to‑open functionality in VSCode, with detailed explanations of loader and plugin architecture, debugging techniques, server setup, and integration steps for a seamless development experience.

Vueloaderplugin
0 likes · 23 min read
Build a Vue Click-to-VSCode Loader & Plugin: Step‑by‑Step Guide
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Jun 21, 2021 · Frontend Development

Mastering Webpack: From Custom Loaders to Powerful Plugins

This article explains how Webpack loaders work, outlines development guidelines, demonstrates synchronous, asynchronous, raw, and pitching loaders with code examples, and then guides you through creating and configuring custom plugins, covering hooks, async handling, and a practical build‑info plugin.

JavaScriptbuild-toolsfrontend
0 likes · 21 min read
Mastering Webpack: From Custom Loaders to Powerful Plugins
ByteFE
ByteFE
Apr 12, 2021 · Frontend Development

Understanding Webpack Loaders: Types, Configuration, Execution Order, and API

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.

build-toolsloaderloader-api
0 likes · 13 min read
Understanding Webpack Loaders: Types, Configuration, Execution Order, and API
ByteFE
ByteFE
Mar 8, 2021 · Frontend Development

Understanding How vue-loader Processes Vue SFC Files and Reuses Other Loaders

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.

JavaScriptVueloader
0 likes · 17 min read
Understanding How vue-loader Processes Vue SFC Files and Reuses Other Loaders
Baidu App Technology
Baidu App Technology
Jan 28, 2021 · Frontend Development

Inside san-loader: How San Files Are Split, Compiled, and Integrated in Webpack

This article provides a deep technical walkthrough of san-loader, explaining how the Baidu‑developed San framework’s .san files are parsed, split into template, script and style sections, processed by san-loader‑plugin, and finally compiled into browser‑ready code with support for options like compileTemplate, esModule, and CSS Modules.

CSS Modulesfrontendloader
0 likes · 18 min read
Inside san-loader: How San Files Are Split, Compiled, and Integrated in Webpack
Alibaba Cloud Developer
Alibaba Cloud Developer
Dec 8, 2020 · Frontend Development

How to Seamlessly Integrate Micro‑Frontends into Legacy Sites: A Practical Guide

This article explains the benefits and pain points of micro‑frontends, outlines a systematic integration approach for existing legacy sites, describes essential loaders and plugins, and provides detailed migration steps and implementation nuances to achieve a stable, extensible frontend architecture.

Frontend ArchitecturePlugin Systemloader
0 likes · 11 min read
How to Seamlessly Integrate Micro‑Frontends into Legacy Sites: A Practical Guide
Fulu Network R&D Team
Fulu Network R&D Team
Jul 6, 2020 · Frontend Development

Antd Icon Reduce Plugin: Design, Implementation, and Usage for Reducing Bundle Size

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.

antdicon optimizationloader
0 likes · 9 min read
Antd Icon Reduce Plugin: Design, Implementation, and Usage for Reducing Bundle Size
37 Interactive Technology Team
37 Interactive Technology Team
Jun 19, 2020 · Frontend Development

Webpack Multi-Page Project Build Practice

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.

Configurationbuildfrontend
0 likes · 20 min read
Webpack Multi-Page Project Build Practice
WecTeam
WecTeam
Sep 13, 2019 · Frontend Development

How to Build a Custom YAML Loader for Webpack: From Basics to AST Parsing

This guide explains what loaders are in Webpack, walks through creating a simple yaml-loader that converts YAML to JSON, shows how to integrate it with webpack configuration, and demonstrates a more advanced AST‑based implementation with best‑practice development tips.

YAMLloaderwebpack
0 likes · 9 min read
How to Build a Custom YAML Loader for Webpack: From Basics to AST Parsing
Didi Tech
Didi Tech
Sep 3, 2019 · Frontend Development

How Vue-Loader Transforms Vue SFCs: A Deep Dive into Its Internals

This article walks through the complete compilation pipeline of a Vue Single‑File Component using vue‑loader v15, examining the VueLoaderPlugin, the pitcher loader, and each processing stage with concrete code examples and configuration snippets.

Vuefrontendloader
0 likes · 18 min read
How Vue-Loader Transforms Vue SFCs: A Deep Dive into Its Internals
Didi Tech
Didi Tech
Aug 24, 2019 · Frontend Development

Webpack Loader Execution Process: Detailed Source Code Analysis

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.

AsyncJavaScriptNode.js
0 likes · 14 min read
Webpack Loader Execution Process: Detailed Source Code Analysis
Didi Tech
Didi Tech
Aug 17, 2019 · Frontend Development

Webpack Loader Configuration and Matching Rules – Detailed Explanation

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.

ConfigurationJavaScriptRule Matching
0 likes · 9 min read
Webpack Loader Configuration and Matching Rules – Detailed Explanation
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 26, 2019 · Frontend Development

Master Multi‑Page Webpack 4 Configuration: From Zero to Production

This tutorial walks through setting up a zero‑configuration Webpack 4 project for multi‑page, multi‑platform applications, covering entry and output settings, dynamic entry generation, loader and plugin configurations, development server setup, and advanced optimization techniques such as code splitting, on‑demand loading, and asset handling.

Configurationbuildfrontend
0 likes · 18 min read
Master Multi‑Page Webpack 4 Configuration: From Zero to Production
Didi Tech
Didi Tech
Apr 4, 2019 · Frontend Development

Customizing Project Logos and Login Backgrounds with a Webpack Merge Loader

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.

CSSFront-endbuild
0 likes · 10 min read
Customizing Project Logos and Login Backgrounds with a Webpack Merge Loader
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Feb 2, 2018 · Frontend Development

Boost Web Performance with Loder: A Lightweight Frontend Loader

Loder is a lightweight, declarative web loader that optimizes resource‑task dependencies, enables ultra‑fast app startup, and provides performance tracking, helping developers overcome the limitations of traditional linear loading especially on constrained mobile devices.

JavaScriptPerformance OptimizationWeb Performance
0 likes · 4 min read
Boost Web Performance with Loder: A Lightweight Frontend Loader
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 20, 2017 · Frontend Development

Master Webpack: Core Concepts, Real-World Scenarios, and Custom Extensions

An in‑depth tutorial explains webpack’s core concepts, build workflow, and practical scenarios—from single‑page apps and code splitting to npm package and server‑side rendering builds—plus guidance on creating custom loaders and plugins, empowering developers to master and extend this essential front‑end bundler.

build-toolsfrontendloader
0 likes · 13 min read
Master Webpack: Core Concepts, Real-World Scenarios, and Custom Extensions
Taobao Frontend Technology
Taobao Frontend Technology
Sep 10, 2016 · Frontend Development

Demystifying Webpack: Inside the Build Process and Core Concepts

This article walks through Webpack's overall workflow, from initial configuration and debugging setup to the detailed compilation, module handling, plugin execution, and final asset generation, illustrating each step with code snippets and diagrams for developers seeking deeper insight.

Build Processloadermodule
0 likes · 17 min read
Demystifying Webpack: Inside the Build Process and Core Concepts