webpack构建基础

收录 webpack 相关的学习与实践内容，涵盖基础用法、核心配置、性能优化与工程化实践。

webpack 处理 JS 资源：Babel、Polyfill 与 ESLint

澄清 webpack 只识别模块语法、不做语法降级，讲解 babel-loader、browserslist、core-js polyfill、TypeScript 处理以及 eslint-webpack-plugin 的集成方式。

webpack前端工程化BabelESLintJavaScript

2026-09-15

webpack 处理 HTML 资源：告别手动引入

讲解 html-webpack-plugin 的自动生成与资源注入、常用配置、多页面 MPA 用法，以及 html-loader 处理模板资源和 copy-webpack-plugin 拷贝静态文件。

webpack前端工程化HTMLHtmlWebpackPlugin

2026-09-15

webpack 开发服务器（devServer）是什么，如何搭建

讲解 webpack-dev-server 的作用与原理，涵盖安装配置、内存编译、热更新、代理跨域、SPA 路由回退以及与生产构建的区别，附完整配置示例。

webpack前端工程化devServer热更新

2026-09-15

webpack 生产模式：是什么、为什么、怎么做

讲清 production 模式的含义与内置优化（压缩、Tree Shaking、Scope Hoisting、NODE_ENV 等），说明开发与生产目标的差异，并给出拆分配置、缓存、gzip 等生产环境实践。

webpack前端工程化生产模式性能优化

2026-09-15

MiniCssExtractPlugin：用 link 引入样式，解决闪屏问题

从 style-loader 的 JS 注入导致 FOUC 闪屏讲起，介绍 MiniCssExtractPlugin 如何把 CSS 抽离成独立文件并用 link 引入，对比两者差异并给出开发/生产环境配置实践。

webpack前端工程化MiniCssExtractPluginstyle-loaderCSS

2026-09-15

用 webpack 处理样式资源：CSS、Less、Sass 全解析

讲解 webpack 处理 CSS、Less、Sass 的完整链路，涵盖 loader 执行顺序、CSS Modules、PostCSS、样式抽离压缩与 asset modules。

webpack前端工程化CSSLessSass

2026-09-15

webpack 如何修改输出文件目录，让结构更清晰

讲解如何通过 output.filename、chunkFilename、assetModuleFilename、MiniCssExtractPlugin、publicPath 等配置，让 JS、CSS、图片、字体按类型分目录输出。

webpack前端工程化构建工具output

2026-09-15

webpack 五大核心概念

从 entry、output、loader、plugin、mode 五个维度系统梳理 webpack 的核心配置，讲清各自职责、常用写法与相互关系。

webpack前端工程化构建工具核心概念

2026-09-15

webpack 的基本使用

从前端工程化痛点出发，讲解为什么需要 webpack，并通过实例演示 entry、output、loader、devServer 等核心配置的基本用法。

webpack前端工程化构建工具

2026-09-15