# DevOpenClub-Tech-Webpack2

**Repository Path**: c4code/DevOpenClub-Tech-Webpack2

## Basic Information

- **Project Name**: DevOpenClub-Tech-Webpack2
- **Description**: DevOpenClud Webpack学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![截图](http://7xqdjc.com1.z0.glb.clouddn.com/blog_4ae6902fe08507b1e5eb63832c82b188.png)

这是我免费发布的高质量超清「Webpack 2 视频教程」。

Webpack 作为目前前端开发必备的框架，Webpack 发布了 2.0 版本，此视频就是基于 2.0 的版本讲解的。

这个基本就是目前国内最完整的 Webpack 2.0 学习视频了，希望可以对新手或者复习相关知识的朋友有用。

源码中包含了课程中的思维导图源文件，使用的思维导图软件为 Mac 下的 iThoughtsX 。


课程地址: [https://devopen.club/course/webpack](https://devopen.club/course/webpack)

> Webpack 是当下最热门的前端资源模块化管理和打包工具。
> 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
> 还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
> 通过loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

# 1. 视频课程简介

* 001 - Webpack 简介
* 002 - NodeJS 安装与配置
* 003 - Webpack 项目初始化
* 004 - Webpack 初体验
* 005 - Webpack 编译输出日志
* 006 - 使用快捷方式进行编译
* 007 - 配置 WDS 进行浏览器自动刷新
* 008 - WDS 端口号等配置相关
* 009 - 配置 ESLint 实现代码规范自动测试 (上)
* 010 - 配置 ESLint 实现代码规范自动测试 (下)
* 011 - Webpack2 中加载 CSS 的相关配置与实战
* 012 - 理解 Webpack 中的 CSS 作用域与 CSS Modules
* 013 - 自动分离 CSS 到独立文件
* 014 - 深入理解 Webpack 2 中的 loader
* 015 - Webpack 2 中的文件压缩
* 016 - Webpack 2 中生成 SourceMaps
* 017 - Webpack 2 中分离打包项目代码与组件代码
* 018 - 使用可视化图表进行统计分析打包过程
* 019 - Webpack 2 中配置多页面编译
* 020 - Webpack 2 中的 HMR (Hot Module Replacement)

课程暂时完结。

稍后会根据小密圈问题以及官方发布 Webpack 3 后进行适当地更新。

关于课程的任何问题，都可以在我们的高质量前端开发小密圈中提问与交流。

课程更新及高质量讨论地址：[https://devopen.club/course/webpack](https://devopen.club/course/webpack)

# 2. 视频课程地

* Webpack 2 前端开发教程优酷完整播单

[http://list.youku.com/albumlist/show?id=49394464&ascending=1&page=1](http://list.youku.com/albumlist/show?id=49394464&ascending=1&page=1)

* Webpack 2 前端开发教程 Youtube 完整播单

[https://www.youtube.com/playlist?list=PLXbU-2B80FvDu2YTKN42WvAVKWHs6XHRy](https://www.youtube.com/playlist?list=PLXbU-2B80FvDu2YTKN42WvAVKWHs6XHRy)

# 3. 课程与前端相关的高质量讨论群

课程更新及高质量讨论小密圈地址：[https://devopen.club/course/webpack](https://devopen.club/course/webpack)