这是我参与「第五届青训营」笔记创作活动的第9天。

Webpack概述

Webpack本质上是一种前端资源打包工具
    多份资源文件打包成一个Bundle；
    支持Babel、Eslint、TS、CoffeScript、Less等；
    支持模块化处理css、图片等资源文件；
    支持HMR+开发服务器；
    支持持续监听、持续构建；
    支持代码分离；
    支持Sourcenmap；
    ...

使用Webpack

核心流程
    1.入口处理——从'entry'文件开始，启动编译流程；
    2.依赖解析——从'entry'文件开始，根据'require' or 'import'等语句找到依赖项；
    3.资源解析——根据'moudule'配置，调用资源转译器，将css等非标准JS资源转译为JS内容;
    4.将转译后的资源内容合并打包为可直接在浏览器运行的JS文件；
    
模块化+一致性
    多个文件资源合并成一个，减少http请求数；
    支持模块化开发；
    支持高级JS特性；
    支持TypeScript、CoffeeScript方言；
    同一图片、CSS、字体等其他资源处理模型；
    ...
    
对于Webpack的基本使用可以查看Webpack官方文档；

理解Loader

为了处理非标准JS资源，设计出资源翻译模块——Loader用于将资源翻译为标准JS；

链式执行；
支持异步执行；
分normal、pitch两种模式；

less-loader:实现less => css的转换；
css-loader:将CSS包装成类似module.exports = "${css}"的内容，包装后的内容符合JS语法；
style-loader:将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签；