这是我参与「第四届青训营 」笔记创作活动的第4天
为什么要学习webpack？
- 理解前端‘工程化’概念、工具、目标
- 一个团队总要有那么几个人熟悉webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
什么是webpack？
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。 本质上是一种前端资源编译、打包工具
特点：
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片，等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap等
使用webpack
1.安装命令：npm i -D webpack webpack-cli
2.编辑配置文件：
3.执行编译命令：npx webpack
核心流程
webpack做的事情：模块化+一致性
- 多个文件资源合并成一个，减少http请求次数
- 支持模块化开发
- 支持高级js特性
- 支持TypeScript、CoffeeScript方言
- 统一图片、css、字体等其它资源的处理模型
- ETC...
关于webpack的使用方法，基本都围绕‘配置’展开，而配置大致分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程配置类
- 按使用频率： 1.'entry/output'
2.'module/plugins'
3.'mode'
4.'watch/devServer/devtool'
处理css
1.安装loader：npm add -D css-loader style-loader
2.添加module处理css文件
接入babel
1.安装依赖：npm i -D @babel/core @babel/preset-env babel-loader
2.声明产物出口output
3.执行npx webpack
生成html
1.安装依赖：npm i -D html-webpack-plugin
2.声明产物出口output
3.执行npx webpack
webpack只认识js
核心功能：把非js的资源，转换成js资源
使用loader
1.安装loader:npm add -D css-loader style-loader less-loader
2.添加module处理css文件
loader链式调用
- less-loader：实现less=>css的转换
- css-loader：将css包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
其他特性
特点：1.链式执行；2.支持异步执行；3.分normal/pitch两种模式
常见loader
站在使用角度，建议掌握这些常见loader的功能、配置方法
总结
优点：
- 对CommonJs,AMD,CMD等支持性很好
- 每个依赖可拆分成一个单独的模块，按需加载
- 开发配置可选择不同环境的配置模式。
- 使用异步I/O(nodejs)和多级缓存提高运行效率
- 主流的前端模块打包工具
- 扩展性强，插件机制完善 缺点：
- 配置复杂
- 不分包bundle.js体积大
- 只能应用模块化开发的项目
- 打包慢
