为什么要学习Webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高端前端必经之路
什么是webpack？
- 本质上是一种前端资源的编译，打包工具。它将根据模块的依赖关系，进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
- Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
前端管理资源时
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSs资源管理模型不一致
webpack本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个 Bundle
- 支持Babel、Eslint、 TS、CoffeScript、 Less、 Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR＋开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持Sourcemap
webpack流程
- 入口处理
从'entry'文件开始,启动编译流程
输入:'entry','context' - 依赖解析
从'entry'文件开始，根据'require'or'import'等语句找到依赖资源
模块解析：'resolve','externals' - 资源解析
根据'module'配置,调用资源转移器，将png.css等非标准JS资源转译为JS内容
模块转译:'module' - 资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
后处理:'optimization','mode','target'
模块化 + 一致性
- 多个文件资源合并成一个，减少HTTP请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript，CoffeeScript方言
- 统一图片，CSS，字体等其他资源的处理模型
- Etc
Webpack 的基本使用方法
- 安装 npm i -D webpack webpack-cli
- 编辑配置文件
- 执行编译命令 ：
npx webpack
流程
- 入口处理 ：从
entry开始，启动编译流程 - 依赖解析 ：从
entry的文件开始，根据require、import等语句找到依赖资源 - 资源解析 ：根据
module的配置，调用资源转移器，将png、css等非标准 JS 资源转译为 JS 内容 - 资源合并打包 ：将转译后的资源内容合并打包为可直接在浏览器运行的 JS 文件
