在 Modern Frontend 开发的版图中，构建工具早已从简单的文件压缩器演变为复杂的工程化枢纽。对于许多初涉 Web 生态的开发者而言，面对 Rollup、Vite、Parcel 等新锐工具的层出不穷，往往会产生一种“选择困难症”。然而，Webpack 作为行业事实上的标准，其深厚的根基与庞大的插件生态依然是中大型项目不可或缺的基石。本套《webpack4视频教程》正是为了帮助学习者跨越这一门槛而设计，它不追求追逐最新的潮流，而是扎实地回归到模块化打包的核心逻辑，通过从零开始的案例实战，带你彻底吃透 Webpack 4 的配置精髓。

课程开篇并未急于上手代码，而是用近二十分钟的时间构建了完整的认知框架。讲师首先厘清了“模块化”的本质——为何我们需要将代码拆分为小块？接着，详细介绍了开发环境的准备工作，让你明白 Node.js 环境、npm 包管理以及 `node_modules` 目录在构建流程中的关键角色。这一部分至关重要，因为很多初学者在配置阶段报错，往往源于对环境基础理解的缺失。通过这一章节，你将建立起对 Webpack 工作模式的宏观印象，明白它不仅仅是打包工具，更是整个前端工程化的调度中心。

进入核心配置阶段，课程深入解析了 Webpack 的灵魂——`webpack.config.js`。很多初学者在遇到配置问题时容易感到迷茫，而本课通过拆解入口（`entry`）与出口（`output`）这两个最基础却最关键的参数，让你掌握如何定义项目的起点与终点。此外，讲师特别强调了 `webpack-dev-server` 的配置，这是现代前端开发中实现“热更新”与本地调试的必备利器。通过细致的讲解，你将学会如何配置代理、端口以及源码映射，从而大幅提升自己的开发效率。

在 Loader 的处理上，课程并没有停留在表面，而是层层递进。首先从 CSS 的处理入手，详解 `style-loader` 与 `css-loader` 的配合原理，让你理解 CSS 是如何被解析并最终注入 DOM 的。随后，课程自然延伸至预处理器 Less 的配置，展示了如何通过 `less-loader` 和 `less` 包的支持，将变量、混入等高级特性融入构建流程。这种由浅入深的教学方式，不仅解决了“怎么用”的问题，更解答了“为什么这么用”的疑问。

整套教程适合那些希望系统掌握 Webpack 4 配置能力，或是在实际项目中遇到构建瓶颈的前端开发者。无论你是否曾接触过其他构建工具，这套课程都能帮助你夯实基础，建立起稳健的工程化思维。掌握 Webpack，不仅意味着掌握了一种打包工具，更意味着你拥有了驾驭复杂前端工程体系的能力。

课程目录

1-1 [webpack4前言] webpack4入门到进阶案例实战课程介绍 (09:23)
1-2 [webpack4前言] webpack模块化打包概念介绍 (07:59)
1-3 [webpack4前言] webpack开发环境准备及常用打包模式介绍 (12:16)
2-1 [webpack4配置] webpack核心配置config文件的初使用 (06:19)
2-2 [webpack4配置] webpack常用配置之入口entry和出口output的进 (08:19)
2-3 [webpack4配置] 开发调试必备配置之本地服务器webpack-dev-serv (09:05)
3-1 [webpack4 loader] webpack加载css所需loader及其使用方式 (09:20)
3-2 [webpack4 loader] webpack如何编译less和sass文件 (08:52)
3-3 [webpack4 loader] 使用PostCSS自动添加css3浏览器前缀 (09:54)
3-4 [webpack4 loader] webpack文件处理（file-loader）- 图片处理 (15:50)
3-5 [webpack4 loader] webpack文件处理（file-loader）- 字体文件 (09:07)
3-6 [webpack4 loader] webpack文件处理（file-loader） (12:08)
3-7 [webpack4 loader] 使用babel-loader编译ES6语法 (09:02)
4-1 [webpack4 插件] 根据HTML模板自动生成HTML(html-webpack- (19:27)
4-2 [webpack4 插件] webpack提取分离css单独打包(ExtractText (11:45)
4-3 [webpack4 插件] 压缩css及优化css结构(optimize-css-ass (05:58)
4-4 [webpack4 插件] 运用webpack插件拷贝静态文件(copy-webpack (06:52)
4-5 [webpack4 插件] webpack插件之clean-webpack-plugin (05:46)
5-1 [webpack4 其他配置] webpack处理HTML内嵌图片 (05:16)
5-2 [webpack4 其他配置] webpack调试必备配置之SourceMap的类型介绍及其 (21:24)
5-3 [webpack4 其他配置] webpack开发调试必备功能之模块热替换HMR (11:29)
5-4 [webpack4 其他配置] 区分生产环境和开发环境的配置 (21:02)
5-5 [webpack4 其他配置] webpack打包优化技巧(1) (15:32)
5-6 [webpack4 其他配置] webpack打包优化技巧(2) (14:51)
6-1 [webpack4 课程总结] 课程核心知识回顾和总结 (31:32)