这是我参与「第五届青训营」伴学笔记创作活动的第13天。今天开始了有关Webpack方面的学习。
为什么要学习Webpack
- 理解前端“工程化”概念、工具、目标
- 可以成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack
本质上是一种前端资源编译、打包工具
Webpack使用方法
示例
- 安装
npm i -D webpack webpack-cli - 编辑配置文件 (略)
- 执行编译文件
npx webpack
核心流程
Webpack本质上：模块化+一致性
- 多个文件资源合并成一个，减少HTTP请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、css、字体等其他资源的处理模型
使用 Webpack
对于Webpack的使用方法，基本围绕着“配置”展开，大致分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
配置总览
- 流程类：
- 输入：entry、context
- 模块处理：module、resolve、externals
- 后处理：optimization、target、mode
- 输出：output
- 工具类：
- 开发效率类：watch、devtool、devserver
- 性能优化类：catche、performance
- 日志类：stats、infrastructureLogging
- 其他：amd、bail
处理CSS
- 安装loader
- 添加‘module’处理css文件
接入Babel
- 安装依赖
- 声明产物出口‘output’
- 执行‘npx webpack’
生成HTML
使用插件，自动生成HTML
工具线
HMR（模块热替换）
可以直接立刻呈现代码效果
- 开启HMR
- 启动webpack（npx webpack serve）
Tree-shaking（用于删除定义了但没用到的代码）
开启：
- mode:production
- optimization.usedExports:true
理解Loader
作用：将非标准JS资源翻译为JS，便于webpack理解
使用
- 安装Loader
- 添加module处理CSS文件
链式调用
其它特性
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
常见Loader
理解插件
提升整个应用的扩展性，Webpack许多功能是基于插件实现的
使用
- html-webpack-plugin
- html-webpack-plugin+DefinePlugin
写插件
插件围绕钩子（事件）展开
钩子的核心为时机、上下文、交互
学习方法
新手学习：
个人小结
webpack作为前端编译打包工具，对前端的意义非凡。课堂中讲解的知识的仍是有限的，后续还需要按照总结出的知识点继续学习。
