这是我参与「第四届青训营 」笔记创作活动的的第12天。
前言
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
本章节基于 Webpack3.0 测试通过。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
为什么要学习webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack,某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
这门课的目标
- 理解Vebpack的基本用法
- 通过介绍Vebpack功能、Loader与Plugin组件设计，建立一个知识体系
- 不会事无巨细，介绍Webpack所有
- 也不是深入源码，讲解底层实现原理
核心流程-极简版
使用webpack
关于Webpack的使用方法，基本都围绕“配置” 展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个o若干个环节， 直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的 配置项
配置总览
按使用频率：
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
认识Loader:其它特性
特点：
- 链式执行
- 支持异步执行
- 分normal、,pitch两种模式
如何编写Loader
module.exports function(source,sourceMap?,data?){
//source为Loader的输入
/可越是文件内容，也可能是上一个1 oader处理知果
return source;
常见Loader
站在使用角度，建议掌握这些常见 Loader的功能、配置方法
进阶篇：理解插件
插件是什么？为什么这么设计？
这是一个特别复杂的过程，那么： 新人需要了解整个流程细节，上手成本高 功能迭代成本高，牵一发动全身 功能僵化，作为开源项目而言缺乏成长性 Blabla 心智成本高=>可维护性低=>生命力弱 插件架构精髓：对扩展开放，对修改封闭
总结
- 我们前面学了：
- ,Nebpack的作用
- 理解Webpack配置结构，学习关键配置项
- Loader的作用与常用Loader
- 插件基本形态与作用
