Webpack课程笔记 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第9天 前几天听了webpack的课程记的部分笔记，改天跟新完毕，往webpack的更深层学习

Webpack课程笔记 | 青训笔记

本质：是一种前端资源编译，打包的工具

• 多份文件打包成一个Bundle
• 支持Bable，Eslint，TS，CoffeScirpt，Less，Sass
• 支持模块化处理css，图片，等资源文件
• ......

使用Webpack

1.安装

2.编辑配置文件 webpack.config.js

入口文件就是要打包的js文件

3.执行编译命令

4.结果

核心流程

1.入口处理

get start

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

2.依赖解析

Dependencies Lookup

从entry开始，根据 require or import等语句找到依赖资源

3.资源解析

transform

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

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

4.资源合并打包

output

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

模块化 + 一致性

• 多个文件资源合并成一个，减少 http 请求数量
• 支持模块化开发
• 支持高级JS特性
• 支持TS等
• 支持图片CSS ，字体，其他资源的处理模型
• ...

关于使用webpack的方法，基本都围绕配置展开 这些配置大致可以分为两类

流程类：作用于流程中某个 or 若干环节，直接影响打包效果的配置项

工具类：主流程之外，提供更多工程化能力的配置项

处理css

当文件中存在css模块时，直接采用上面的方法会报错

模块解析异常，需要一些lodader来处理css

loader定义方法通过modules

意思是 使用 style-loader和css-loader去处理 css 后缀的内容

（当然要把style-loader和css-loader提前安装好。nom add -D css-loader style-loader）

webpack接入Babel

由于ES5到ES6的跨度有点大，当时浏览器不支持，就出现了Babel，用于将高级的js，转化为浏览器可以解析的代码。

1.安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

2.声明产物出口output

3.执行npx