mksz316 - 手把手带你掌握新版webpack4.0

体系课

课程简介

这门课解决什么问题很多开发者在项目从 Webpack 3 升级到 4.0 时，往往面临配置逻辑混乱、构建速度缓慢以及不知如何正确利用自动配置机制的困境。这门课主要针对的是缺乏系统工程化构建经验、在配置 Loader 和 Plugin 时感到迷茫的职场人。它不讲空洞的 API 语法，而是聚焦于实际工作场景：如何处理模块解析路径、如何配置开发环境与生产环境的…

已有 0 人浏览发布 2026-10-17 更新 2026-10-18

这门课解决什么问题

很多开发者在项目从 Webpack 3 升级到 4.0 时，往往面临配置逻辑混乱、构建速度缓慢以及不知如何正确利用自动配置机制的困境。这门课主要针对的是缺乏系统工程化构建经验、在配置 Loader 和 Plugin 时感到迷茫的职场人。它不讲空洞的 API 语法，而是聚焦于实际工作场景：如何处理模块解析路径、如何配置开发环境与生产环境的差异化构建、以及如何通过代码分割和资源压缩来显著提升项目的打包性能。如果你在项目中遇到构建报错排查困难、依赖冲突严重或者不知道如何为团队定制合理的构建方案，这门课能帮你填补工程化能力上的短板，解决具体的落地难题。

适合什么基础，学完能独立做什么

这门课适合已经具备一定前端基础、能够熟练编写 HTML、CSS 和 JavaScript 代码，但尚未系统掌握 Webpack 构建原理的上班族或转行者。你不需要是构建工具的专家，但需要了解基本的模块化开发概念。学完这门课后，你将不再依赖脚手架的默认模板，而是具备独立搭建和维护前端项目构建系统的能力。具体来说，你将能够根据业务需求编写自定义 Loader 或 Plugin，灵活配置多入口多出口应用，并能独立解决构建过程中出现的路径解析错误和性能瓶颈。你将能够独立输出一套结构清晰、运行高效的 Webpack 4.0 配置方案，并有能力在团队协作中主导项目构建流程的优化。

建议先看哪几块，资料怎么配合练习

建议的学习顺序是先从“核心概念与配置加载器”开始，这部分是理解后续优化的基础。在观看视频时，请务必配合资料包中的源码文件进行实操。不要只看不动手，建议尝试删除资料中的关键配置项，观察构建报错，以此来反向验证你对原理的理解。当学到“代码分割与性能优化”章节时，请务必对比资料包中不同规模 Demo 的打包体积，通过修改配置参数观察变化，这比单纯看视频更能加深记忆。最后，在掌握基础配置后，尝试将资料包中的 Demo 拆解并重新整合，构建一个属于自己的微型项目，这才是检验学习成果的最佳方式。通过这种方式，你可以确保学到的技能能够直接迁移到实际工作中去。

mksz316 - 手把手带你掌握新版webpack4.0

课程目录

第1章 课程导学（打消你的学习疑虑）(微信-rmshou-收集整理)/
1-1 课程导学(微信-rmshou-收集整理).mp4
第2章 Webpack 初探(微信-rmshou-收集整理)/
2-1 webpack 究竟是什么？(微信-rmshou-收集整理).mp4
2-2 什么是模块打包工具？(微信-rmshou-收集整理).mp4
2-3 Webpack的正确安装方式(微信-rmshou-收集整理).mp4
2-4 使用Webpack的配置文件(微信-rmshou-收集整理).mp4
2-5 浅析 Webpack 打包输出内容(微信-rmshou-收集整理).mp4
第3章 Webpack 的核心概念(微信-rmshou-收集整理)/
3-1 什么是 loader(微信-rmshou-收集整理).mp4
3-10 Hot Module Replacement 热模块更新（2）(微信-rmshou-收集整理).mp4
3-11 使用 Babel 处理 ES6 语法（1）(微信-rmshou-收集整理).mp4
3-12 使用 Babel 处理 ES6 语法（2）(微信-rmshou-收集整理).mp4
3-13 Webpack 实现对React框架代码的打包(微信-rmshou-收集整理).mp4
3-2 使用 Loader 打包静态资源（图片篇）(微信-rmshou-收集整理).mp4
3-3 使用 Loader 打包静态资源（样式篇 - 上）(微信-rmshou-收集整理).mp4
3-4 使用 Loader 打包静态资源（样式篇 - 下）(微信-rmshou-收集整理).mp4
3-5 使用 plugins 让打包更便捷(微信-rmshou-收集整理).mp4
3-6 Entry 与 Output 的基础配置(微信-rmshou-收集整理).mp4
3-7 SourceMap 的配置(微信-rmshou-收集整理).mp4
3-8 使用 WebpackDevServer 提升开发效率(微信-rmshou-收集整理).mp4
3-9 Hot Module Replacement 热模块更新（1）(微信-rmshou-收集整理).mp4
第4章 Webpack 的高级概念(微信-rmshou-收集整理)/
4-1 Tree Shaking 概念详解(微信-rmshou-收集整理).mp4
4-10 Webpack 与浏览器缓存( Caching )(微信-rmshou-收集整理).mp4
4-11 Shimming 的作用(微信-rmshou-收集整理).mp4
4-12 环境变量的使用方法(微信-rmshou-收集整理).mp4
4-2 Develoment 和 Production 模式的区分打包(微信-rmshou-收集整理).mp4
4-3 Webpack 和 Code Splitting（1）(微信-rmshou-收集整理).mp4
4-4 Webpack 和 Code Splitting（2）(微信-rmshou-收集整理).mp4
4-5 SplitChunksPlugin 配置参数详解（1）(微信-rmshou-收集整理).mp4
4-6 SplitChunksPlugin 配置参数详解（2）(微信-rmshou-收集整理).mp4
4-7 Lazy Loading 懒加载，Chunk 是什么？(微信-rmshou-收集整理).mp4
4-8 打包分析，Preloading, Prefetching(微信-rmshou-收集整理).mp4
4-9 CSS 文件的代码分割(微信-rmshou-收集整理).mp4
第5章 Webpack 实战配置案例讲解(微信-rmshou-收集整理)/
5-1 Library 的打包 (微信-rmshou-收集整理).mp4
5-10 Webpack 性能优化(3)(微信-rmshou-收集整理).mp4
5-11 Webpack 性能优化(4) (微信-rmshou-收集整理).mp4
5-12 webpack性能优化(5)(微信-rmshou-收集整理).mp4
5-13 多页面打包配置 (微信-rmshou-收集整理).mp4
5-2 PWA 的打包配置(微信-rmshou-收集整理).mp4
5-3 TypeScript 的打包配置(微信-rmshou-收集整理).mp4
5-4 使用 WebpackDevServer 实现请求转发(微信-rmshou-收集整理).mp4
5-5 WebpackDevServer 解决单页面应用路由问题(微信-rmshou-收集整理).mp4
5-6 EsLint 在 Webpack 中的配置（1）(微信-rmshou-收集整理).mp4
5-7 EsLint 在 Webpack 中的配置（2）(微信-rmshou-收集整理).mp4
5-8 webpack 性能优化(1) (微信-rmshou-收集整理).mp4
5-9 webpack 性能优化(2) (微信-rmshou-收集整理).mp4
第6章 Webpack 底层原理及脚手架工具分析(微信-rmshou-收集整理)/
6-1 如何编写一个 Loader（1）(微信-rmshou-收集整理).mp4
6-2 如何编写一个 Loader（2）(微信-rmshou-收集整理).mp4
6-3 如何编写一个 Plugin(微信-rmshou-收集整理).mp4
6-4 Bundler 源码编写（模块分析 1） (微信-rmshou-收集整理).mp4
6-5 Bundler 源码编写（模块分析 2）(微信-rmshou-收集整理).mp4
6-6 Bundler 源码编写（ Dependencies Graph ）(微信-rmshou-收集整理).mp4
6-7 Bundler 源码编写（ 生成代码 ）(微信-rmshou-收集整理).mp4
同类型课程.jpg
第7章 Create-React-App 和 Vue-Cli 3.0脚手架工具配置分析(微信-rmshou-收集整理)/
7-1 通过 CreateReactApp 深入学习 Webpack 配置（1）(微信-rmshou-收集整理).mp4
7-2 通过 CreateReactApp 深入学习 Webpack 配置（2）(微信-rmshou-收集整理).mp4
7-3 Vue CLI 3 的配置方法及课程总结（1）(微信-rmshou-收集整理).mp4
7-4 Vue CLI 3 的配置方法及课程总结（2）(微信-rmshou-收集整理).mp4
资料/
代码资料.zip