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

什么是Webpack

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

主要功能

其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。 webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

运行环境

webpack 5运行于Node.js v10.13.0+的版本

使用Webpack

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项

1.创建项目（在自定义的路径下创建一个空文件夹webpack-study),创建完毕后,在IDEA中打开。
2.创建一个名为modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js,用于编写JS模块相关代码；
4.在modules下创建一个名为main.js的主入口文件，用于打包时设置entry属性
5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包（以管理员身份输入）
6.在项目路径下创建HTML页面，如index.html,导入Webpack打包后的JS文件
7.运行HTMl的效果

具体流程

1.入口处理

从enty文件开始，启动编译流程

2.依赖解析

从entry~文件开始，根据requireorimport等语句找到依赖资源

3.资源解析

根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

4.资源合井打包

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

之后，递归调用2、3，直到所有资源处理完毕

优点

模块化+一致性

• 多个文件资源合并成一个，减少 http 请求数
• 支持模块化开发
• 支持高级 JS 特性
• 支持Typescript、CoffeeScript 方言
• 统一图片、CSS、字体 等其它资源的处理模型