This article explains how Webpack's Hot Module Replacement works, covering its benefits, the build and watch processes, the role of webpack-dev-middleware and webpack-hot-middleware, and provides detailed code examples to illustrate the communication between the server and the browser.
Jennifer Bland explains how to halve a Vue.js production bundle from 2.48 MB to 1.28 MB by using webpack-bundle-analyzer and applying targeted optimizations such as removing unused libraries, importing only needed lodash functions, aliasing moment, and configuring vuetify-loader to include only required components.
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.
This article explains why users care about sub‑two‑second page loads, introduces skeleton screens as a visual solution, reviews existing front‑end approaches, and details a custom automated pipeline using Puppeteer and a draw‑page‑structure plugin to generate and inject skeleton screens with minimal maintenance.
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.
This article explains what cross‑origin requests are and presents four practical solutions—webpack proxyTable, SwitchHosts, Uuaper, and Nginx—detailing configuration steps, common pitfalls, and code examples to help developers overcome CORS problems during local development.
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.
This article explores kbone's ability to compile Vue‑based web code into WeChat mini‑programs, detailing its build and runtime mechanisms, component adaptation, style compatibility challenges, practical implementation experiences, and tips for integrating kbone into new or existing projects.
This article explains the inner workings of Tapable—the hook library behind Webpack—by detailing its synchronous and asynchronous hook types, registration and invocation methods, the lazy‑compilation code‑generation process, and how these mechanisms give Webpack a performance edge over naïve event loops.
This article explains how to identify oversized JavaScript bundles with webpack‑bundle‑analyzer, split protobuf‑generated code into business‑specific modules, and apply Babel’s parser, traverse, types, and generator tools to automatically remove redundant commons code and restructure module patterns, dramatically reducing bundle size and improving frontend performance.
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.
Mpx 2.0 is an enhanced mini‑program framework that provides full cross‑platform support for WeChat, Alipay, Baidu, Toutiao and QQ, enabling developers to compile existing WeChat projects and native components to other platforms while offering sub‑package optimization, conditional compilation, setData efficiency and near‑zero migration effort.
This article explains how to rapidly configure a full‑stack web development environment using the qvk scaffold, covering repository cloning, dependency installation, build steps, server and client startup, and basic usage of ThinkJS, Vue.js, and Webpack for H5 projects.
This article presents a collection of practical Vue.js development techniques, including centralized resize handling, global filter and component registration, route component reuse, lazy-loading strategies, vue-loader configurations, and render-function usage, each illustrated with concise code examples for more efficient and maintainable front-end projects.
This article explains how to use SourceMap files to trace minified JavaScript errors back to their original source lines, covering overall design, code examples, error reporting workflow, CI integration, storage strategies, and future monitoring enhancements.
This article explores the development of NutUI 2.0, a Vue component library, detailing why Webpack was chosen over Rollup, how to configure UMD builds, manage external Vue dependencies, and leverage tree‑shaking to reduce bundle size.
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 details the front‑end performance improvements applied to JD's PLUS membership platform, covering architecture migration to Gaea 4.0, on‑demand Babel polyfill loading, PWA caching, request sequencing, skeleton screens, and modern image formats such as WebP and DPG.
This comprehensive guide walks you through essential webpack configuration topics—including entry, output, plugins, module resolution, caching, development experience enhancements, and advanced performance tricks like splitChunks and Terser—showing how to dramatically speed up builds and improve bundle efficiency for modern frontend applications.
This article explains how Taro's H5 build size was dramatically reduced by applying dead‑code elimination, configuring sideEffects, converting component and API packages to ES modules, and using webpack's tree‑shaking together with a custom Babel plugin to replace default imports with named imports.
This article explains how front‑end developers can analyze and shrink their JavaScript bundles by using Chrome DevTools, Lighthouse’s unused‑code audit, and visual tools such as Webpack Bundle Analyzer, and provides practical tips for removing unused or unnecessary libraries.
This article explains how React 16.6 introduced React.lazy and Suspense to simplify component code splitting and lazy loading, discusses why code splitting is needed, demonstrates dynamic import() usage, compares React-loadable with the built‑in APIs, and shows advanced patterns such as nested Suspense boundaries.
Mpx is an enhanced mini‑program framework that directly extends native mini‑program syntax with Vue‑style development tools, Webpack‑based compilation, reactive data handling, component‑level setData optimization, Vuex‑compatible state management, and team‑oriented features, delivering superior developer experience and performance for WeChat and Alipay apps.
This article details the development of the 360 AI speaker’s H5 mobile application, covering project environment setup, native‑WebView interaction, custom Chinese font handling, dynamic form input components, and Docker deployment, providing practical front‑end engineering insights and code examples for similar projects.
This article details a front‑end engineer's experience building a hotel mini‑program with the DACE framework—covering its React‑based SSR architecture, module organization, data fetching strategies, custom components, webpack code‑splitting, and the challenges and insights gained during development, integration, and deployment.
This article explains how to improve web application performance by leveraging persistent caching with proper cache‑control headers, versioning bundles using hash‑based filenames, extracting dependencies and runtime into separate chunks, inlining runtime scripts, applying lazy loading with dynamic imports, splitting code by routes or pages, and stabilizing module IDs with hashed IDs, all using webpack configurations for both version 3 and 4.
This article revisits and updates a previous guide, replacing webpack3 with webpack4 and adding modern automation concepts, then systematically walks through network transmission, page rendering, and JavaScript blocking optimizations—covering caching, resource compression, sprite generation, GPU acceleration, and server‑side techniques like gzip, CDN, load balancing, and Node.js scaling.
Meituan’s HR platform adopts a micro‑frontend architecture where a central Portal container registers isolated sub‑projects via a global route array, namespaces CSS, unifies shared libraries through a custom require system, and deploys static assets with PM2, delivering a single‑page experience, independent releases, and minimal bundle overhead.
This article explains why Webpack‑dev‑server's hot refresh failed in a mixed JS‑Node‑PHP project, analyses the underlying host‑checking logic, and provides step‑by‑step configuration changes—including whitelist adjustments, CORS handling, and proper HotModuleReplacementPlugin usage—to achieve reliable hot reload and hot module replacement.
This article walks through setting up a .NET Core project, initializing a Vue.js application with vue‑cli, configuring webpack to output to wwwroot, and automating front‑end builds within the .NET Core build process, enabling seamless front‑end and back‑end integration.
By using Webpack’s CommonsChunkPlugin to extract node_modules into a vendor chunk, configuring externals to load Vue and Vuetify from a CDN, and converting non‑critical components to async imports, a Vuetify‑based app reduces its first‑screen bundle by hundreds of kilobytes, improves caching, and speeds initial load.
This article provides a step‑by‑step tutorial on building a simple ThinkJS + Vue2 project with separate user and admin pages, covering directory layout, proxy setup, multi‑page webpack configuration, server routing, API creation, adding new pages, and production build deployment.
The article explains how Webpack's SplitChunksPlugin enables effective code splitting for shared libraries and components, reducing initial bundle size, improving caching, and speeding up page loads, with practical configuration examples and usage tips from Snowball's front‑end architecture.
This guide walks you through the core components of Webpack—including Tapable, Compiler, Compilation, Resolver, Module Factory, Parser, and Template—explaining their roles, source locations, and how they interact to transform entry files into bundled assets.
This article explains how to improve front‑end performance by separating business code from libraries, using on‑demand async loading, configuring CommonsChunkPlugin, externalizing large dependencies, and applying HTTP/2 optimizations, all demonstrated with a real Vue/Vuetify project.
This article shares the practical experience of creating a Vue 2 mobile UI component library, covering the choice of scaffolding tools, Webpack UMD packaging configuration, component classification, CSS scoping decisions, on‑demand custom builds, and the adoption of SVG‑based icon solutions.
This article explores the performance challenges of large Single Page Applications and presents six practical optimization techniques—including fast startup, route-based code splitting, shared bundle extraction, component preloading, ESM tree‑shaking, and PWA caching—to maintain a smooth user experience while keeping bundle sizes low.
The article introduces ArthurCI, a front‑end continuous‑integration platform developed by 58, detailing its design, performance optimizations such as yarn caching and parallel webpack compression, ease‑of‑use integration steps, stability features, and future data‑driven enhancements, while comparing it with tools like TravisCI.
This article walks through creating a React application without scaffolding tools, detailing the project directory layout, chosen tech stack—including React, Redux, Immutable.js, redux‑saga, and axios—along with development utilities like redux‑devtools and Reactotron, component organization, routing strategies, state persistence, and asynchronous task management.
This article walks through creating a React application without scaffolding tools, detailing project directory layout, chosen technology stack—including React, Redux, Immutable.js, react-router, redux-saga, and related debugging and persistence utilities—while explaining component design, middleware, enhancers, routing, and asynchronous task management.
This article explains how JavaScript performance impacts web applications and provides practical optimization strategies—including the RAIL model, load time statistics, parsing and compilation overhead, bundle size reduction, code splitting with Webpack, and modern transpilation techniques—to help front‑end developers deliver faster, more responsive sites.
This tutorial explains why and how to build multi‑page Vue applications using vue‑cli and webpack, covering project setup, configuration files, webpack entry and output handling, HTML generation, asset management, and performance optimizations for both development and production environments.
This article details the design and implementation of Tencent Cloud's internal YY‑DSA operations platform, covering project background, frontend technology selection (Vue.js, Element‑UI, webpack), project structure, development environment, build optimizations such as code splitting, CommonsChunk, and the comparison of Dll versus externals for faster builds.
This article walks through the development of a Vue‑based single‑page application for the JD Car Maintenance project, covering why Vuex was chosen, its core concepts, store implementation, state persistence, cross‑origin handling, Axios/JSONP requests, code refactoring, lazy loading, and component extraction to improve maintainability and performance.
This article explains how modern browsers that support ES modules can load native ES2015+ JavaScript while older browsers receive a compiled ES5 fallback, detailing conditional polyfill loading, webpack and Babel configurations, script tag usage, performance benefits, and practical implementation steps.
The article describes how to reuse React‑Native code on the web with react‑web by mapping components during bundling, handling platform‑specific layout and flexbox differences, and applying optimizations such as server‑side rendering, on‑demand imports, Preact substitution, and CSS extraction, which together cut bundle size by up to 70 % and halve first‑paint time.
This article walks through the design, architecture, and implementation of JD's E‑Wei ticket‑handling platform, detailing the Vue single‑page application structure, component organization, routing, mock API usage, CORS handling, and deployment insights for front‑end engineers.
This article explains how to identify, extract, and inline critical CSS using the Critical Node.js module and a custom Webpack plugin, while deferring non‑critical CSS loading to improve first meaningful paint and overall page performance.
This tutorial walks through creating a comfortable frontend development workflow by installing Node.js, managing packages with npm and nrm, initializing a project, configuring Webpack with Babel and SASS loaders, and enabling hot module replacement for seamless code updates.
This tutorial explains how to keep webpack‑dev‑server running on a remote machine using tmux, demonstrates session management commands, and then introduces three bundle‑analysis tools and several straightforward webpack optimizations to reduce bundle size and improve performance.
This article provides a comprehensive overview of the front‑end development workflow, explaining core concepts like HTML, CSS, JavaScript, and detailing essential tools such as npm, Babel, Gulp, Webpack, and popular frameworks like React and Vue, while addressing their roles and interactions.
This article provides a thorough overview of Babel, covering its core concepts, installation and configuration methods (including Webpack, fis3, command‑line, and programmatic usage), preset and plugin options, the compilation pipeline, AST fundamentals, and step‑by‑step instructions for creating and testing custom Babel plugins.
This week’s front‑end roundup covers Baidu’s new Vue‑based PWA LAVAS and Web AR support, a decline in global PC shipments, Taobao’s group‑buy launch, upcoming async CSS in Webpack, MobX 3.2.0, China’s first smart parking system, Apple’s open‑sourced Swift Migrator, Let’s Encrypt wildcard certificates, Facebook camera updates, and Huawei’s 5G trial talks with India.
This article explores why locating errors in minified JavaScript is difficult and presents five concrete solutions—including avoiding compression, adjusting semicolons, using beautify mode, leveraging SourceMap files, and adopting Sentry—to quickly pinpoint the original source of runtime errors.
This tutorial walks you through the entire process of creating a basic commercial website front‑end—from gathering requirements and designing interactions to setting up a Vue‑webpack project, installing iView components, and launching the site—in roughly one hour of work.
This article explains what PostCSS is, distinguishes it from CSS preprocessors, introduces popular plugins such as autoprefixer and precss, and provides detailed configuration examples for Webpack and ykit, helping developers efficiently integrate PostCSS into their front‑end workflows.
This article walks through the practical differences and best‑practice setups for building Weex applications on web and native platforms, covering webpack configurations, preprocessors, style quirks, navigation, data passing, image handling, incremental updates, and production tips.
This article explains how TypeScript extends JavaScript with static typing, improves code safety, integrates with tools like Webpack and TSLint, and provides practical setup, compilation, and type‑definition guidance for building robust front‑end applications.
This article introduces Ykit, a Webpack‑based build tool created to simplify environment setup, reduce configuration complexity, and accelerate build times through entry filtering, multi‑process compression, and a rich plugin ecosystem, sharing its adoption and future roadmap at Qunar.
This article outlines a comprehensive front‑end engineering workflow covering modularization, componentization, standardization, and automation, then details technology choices such as Vue, Koa, Sass, and webpack, and provides practical project configuration tips for CSS, webpack, Babel, and CI/CD.
This tutorial walks you through installing Node, npm, and nvm, setting up a simple Vue project, using Webpack to bundle JavaScript, CSS, and images with loaders, and demonstrates core commands and configuration steps for beginners.
This article explores how to optimize Babel usage to reduce bundle size and improve performance by addressing helper duplication, third-party module handling, and import optimization through transform-runtime, include patterns, and import transformation plugins.
The article recaps the first Frontend Technology Salon, covering ES6 fundamentals, Webpack packaging, and practical ES6 asynchronous programming examples, offering detailed explanations and code demonstrations for frontend developers and highlights common pitfalls and browser compatibility issues.
This article details the transformation of the HULK private‑cloud platform's front‑end from a PHP‑based MVC system to a modern React SPA using webpack, Redux, SASS and code‑splitting, highlighting the motivations, architectural decisions, and performance benefits of the 3.0 overhaul.
Learn how to dramatically reduce webpack build times for large React projects by switching to Yarn, removing unused dependencies, leveraging code splitting, caching, parallel Uglify, HappyPack, DLL plugins, aliasing, and other practical configuration tweaks that cut initial builds from minutes to seconds.
ELF is a Node‑based CLI tool that streamlines HTML5 scene‑marketing project creation by providing quick installation, project initialization with ready‑made templates, and automated build processes powered by webpack, helping developers avoid repetitive setup tasks.
Learn how to leverage webpack 2's advanced features—such as CSS minification, tree‑shaking, UglifyJsPlugin tuning, environment variables, CommonsChunkPlugin, and development‑time accelerators like aliasing and caching—to produce smaller bundles, faster builds, and a smoother developer experience.
This article introduces HappyPack—a webpack plugin that speeds up builds by running loaders in parallel processes—covers its configuration, internal architecture including thread‑pool management, RPC handling, caching mechanisms, and provides detailed code examples to illustrate its integration and operation.
This article introduces a Webpack2‑based React‑Redux boilerplate, detailing its architecture, core features, configuration options, development workflow, server‑side rendering support, and best‑practice recommendations, while providing code examples and guidance for both beginners and experienced frontend developers.
A humorous 2016 dialogue walks through the shift from jQuery to React, explaining JSX, ES6+, Babel, module bundlers, task runners, TypeScript, Flow, Fetch API, and template engines, while highlighting the rapid evolution of frontend tooling and best practices.
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.
This tutorial walks you through the reasons for using SPA, why Vue.js is a lightweight alternative to React, how to set up the Node environment, configure Webpack, create components, manage routing, handle component lifecycles, and implement nested routes with practical code examples.
This article provides a comprehensive overview of modern front‑end development, covering the evolution of development workflows, emerging languages and tools, the impact of React and Flux/Redux architectures, asynchronous handling with promises and saga, and practical best‑practice recommendations for building robust web applications.
This article explains the fundamentals of Webpack, covering its packaging principles, key configuration options such as entry, output, resolve, externals, and watch, and provides concrete code examples to help developers efficiently bundle front‑end assets.
The article presents advanced Webpack configuration strategies—including programmatic Node‑API builds, streamlined loader setups, global module injection and environment definitions, commons chunk extraction, DLL bundling, on‑demand code splitting, UglifyJS minification, and server‑side bundling—to help developers efficiently manage complex projects.
This article introduces webpack, explains its advantages, guides through installation, configuration, loaders, plugins, and practical usage examples, covering module formats, shimming, extracting CSS, CDN integration, and integration with tools like Gulp, providing a comprehensive beginner‑to‑intermediate tutorial.
This article details the challenges of evolving a large legacy frontend codebase, the transition from jQuery and fis3 to React with TypeScript, the integration of webpack-like features, server‑side rendering techniques, and the use of yog2, Fit, and related tooling to streamline modern web development.
The article details how to set up isomorphic ReactJS server‑side rendering using ReactDOMServer, Redux for shared state, and React Router for universal routing, covering data fetching, Webpack builds for client and Node, code‑splitting, and performance trade‑offs such as CPU overhead and caching strategies.
This tutorial explains how to define a JavaScript library, set up a clean project structure, use Babel to transpile ES6, configure Webpack for development and production builds (including UMD output), add npm scripts, run Mocha/Chai tests, and manage related configuration files.
This article presents a detailed case study of a mobile‑first single‑page web application built with React.js, Redux, React‑router, and a custom Node.js framework, describing the technology selection, development workflow, encountered challenges, and the advantages and drawbacks of the chosen stack.
