Webpack(1)|青训营

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

什么是Webpack

前端项目都是由各种各样的资源构成的，可以手动管理这些资源，但是效果不好、效率也很低。现在有很多工程化工具，也正是因为这些工具的出现，得以有前端工程 webpack本质上是一种前端资源编译、打包工具，多份资源文件打包成一个bundle。

使用webpack——示例

• 安装
  npm i -D webpack webpack-cli
• 编辑配置文件
• 执行编译命令
  npx webpack

Webpack打包核心流程

• 入口处理(Get Start) 从entry文件开始，启动编译流程
• 依赖解析（Dependencies Lookup） 根据require or import等语句找到依赖资源
• 资源解析（Transform） 根据module配置，调用资源转移器，将png， css等非标准JS资源转译为JS内容
• 资源合并打包(Combine Assets) 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件 递归依赖解析和资源解析，直到所有资源处理完毕

关键配置项介绍

webpack的使用方法围绕配置展开，可大致划分为2类：

• 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
  • Get Start 输入entry content
  • Dependencies Lookup 模块解析 resolve externals
  • Transform 模块转译 module
  • Combine Assets 后处理 optimization mode target
• 工具类：主流程之外，提供更多工程化能力的配置项

Loader组件

安装Loader，添加module处理css文件 在webpack.config.js内的module.exports中加入以下代码，否则webpack无法解析css文件

接入Babel

安装依赖、声明产物出口output，执行npx webpack（babel是将高版本的JS代码转写成低版本的代码）