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

Webpack 定义解析

什么是Webpack

一个前端项目往往需要由大量且各式的资源组成，例如图片， js，ts代码等，这时候管理这些资源就是个繁琐且容易出错的问题：导入这些文件很比较困难，手动导入的话需要一个一个导入这些资源：

手动管理存在这些问题：

• 依赖手工，比如有50个JS文件.…操作，过程繁琐
• 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
• 开发与生产环境一致，难以接入TS或JS新特性
• 比较难接入Less、Sass等工具eJS、图片、CSS资源管理模型不一致

这些都是旧时代非常突出的问题，对开发效率影响非常大，

现存的工程化工具包括有：webpack，gulp，rollup，vite等。 这些都是将前端资源编译、打包的工具，能将多份资源文件打包一个Bundle。

一般打包工具都会支持Babel、Eslint、TS、CoffeScript、Less、Sass 支持模块化处理css、图片等资源文件 支持HMR+开发服务器 支持持续监听、持续构建 支持代码分离 支持Tree-shaking 支持Sourcemap

简单使用Webpack

特点：

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

基本使用

安装

npmi-D webpack webpack-cli

编辑配置文件

执行编译命令

npx webpack

极简版核心流程

使用webpack

webpack的使用基本都是围绕“配置”展开的，

而这些配置大致可划分为两类：

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

流程类配置

• 配置总览：

简单的基本使用实例

在此结构下配置webpack，

1. 声明入口‘entry'

2. 声明产物出口‘output'

3. 运行‘npx webpack'