这堂模块化打包课值不值得学

很多写页面的前端新手，到了公司会卡在一个场景：项目代码拆了几十个 JS 和 CSS 文件，手动用 script 标签引入会冲突，样式互相覆盖，本地改一行代码还得手动刷新浏览器。这门 Webpack4 课程解决的就是前端工程化里最基础的“代码怎么拼装”问题。它不教怎么写业务逻辑，而是教你怎么用工具把零散的模块打包成能在浏览器跑的静态资源。如果你正准备进真实的前端团队，或者接手别人的项目发现跑不起来，需要看懂构建配置，那这门课的优先级很高。但如果你还在学 HTML 和 CSS 基础排版，建议先放一放，因为它默认你已经能独立写页面了。

资料怎么用：先跑通本地调试再管打包

这套资料适合有一定前端基础、对模块化有初步概念的同学。拿到资料后，不要从头顺着看，建议先从“核心配置文件使用”和“本地服务器”这两块入手。自己新建一个空文件夹，跟着配好入口和出口，把本地开发服务器跑起来。当你能在浏览器里看到页面，且修改代码后自动刷新，就算把开发链路走通了。接着再去啃 Loader 部分，重点跟着操作怎么用工具加载 CSS、编译 Less 和 Sass，以及用 PostCSS 自动补齐浏览器前缀。不要光看视频，每讲到一个 Loader，就自己写一段对应的样式代码去跑一次构建，看报错信息并解决它，这是掌握构建工具的唯一捷径。

学完能独立做什么

完整过完这些配置和实战案例后，你能在公司里独立搭建一个常规的前端开发环境。具体来说，拿到一个新项目，你可以自己初始化配置文件，定义好代码的入口和打包输出的目录，把团队写的样式和脚本模块串起来。当遇到样式兼容性问题时，你能熟练地引入 PostCSS 去处理；遇到不同语法的样式文件，也知道该加哪个 Loader 去编译。虽然 Webpack4 不是最新版本，但配置思路和核心概念与现在的工具一脉相承。学透之后，你不仅不用再怕改坏项目配置，还能看懂别人的构建逻辑，真正从前端切图写页子的阶段，过渡到具备工程化开发意识的阶段。


对模块化开发有一些了解||适合有一定前端基础的同学||对打包有一个基本的概念掌握前端工程化开发，模块化打包 || 掌握webpack的CLI（命令行）|| 掌握

课程目录

*   webpack4前言/

  *   webpack4入门到进阶案例实战课程介绍

  *   webpack模块化打包概念介绍

  *   webpack开发环境准备及常用打包模式介绍

*   webpack4配置/

  *   webpack核心配置config文件的初使用

  *   webpack常用配置之入口entry和出口outpu

  *   开发调试必备配置之本地服务器webpack-dev-s

*   webpack4 loader/

  *   webpack加载css所需loader及其使用方式（style-loader和css-loader）

  *   webpack如何编译less和sass文件

  *   使用PostCSS自动添加css3浏览器前缀

  *   webpack文件处理（file-loader）- 图片处理

  *   webpack文件处理（file-loader）- 字体文件处理

  *   webpack文件处理（file-loader）- 第三方js库处理

  *   使用babel-loader编译ES6语法

*   webpack4 插件/

  *   根据HTML模板自动生成HTML(html-webpack-plugin)

  *   webpack提取分离css单独打包(ExtractTextPlugin、mini-css-extract-plugin)

  *   压缩css及优化css结构(optimize-css-assets-webpack-plugin)

  *   运用webpack插件拷贝静态文件(copy-webpack-plugin)

  *   webpack插件之clean-webpack-plugin清除文件

*   webpack4 其他配置/

  *   webpack处理HTML内嵌图片

  *   webpack调试必备配置之SourceMap的类型介绍及其使用方式

  *   webpack开发调试必备功能之模块热替换HMR

  *   区分生产环境和开发环境的配置

  *   webpack打包优化技巧(1)

  *   webpack打包优化技巧(2)

*   webpack4 课程总结/

  *   课程回顾和总结

  *   课程回顾和总结