01-concept

Posted 2021-01-29 techmessage

 

 

concepts

 

1. webpack的核心是 静态 模块打包器， 当webpack 打包你项目时，它

会在内部建立 依赖图， 该依赖图会映射到项目中每个模块，并且生成

一个或者多个打包文件。

 

从webpack4.0.0开始，配置文件不在是必须的，但是配置文件可以

更好的服务你的需求

 

 

2. 核心概念

Entry

Output

Loaders

Plugins

Mode

Browser Compatibility

 

3. Entry

打包入口文件， 从这个文件开始webpack 建立内部的依赖图，webpack

会从该入口文件中计算出它的所有依赖模块和库(直接或者间接的)

 

Output

输出文件，webpack 将打包的文件输出，默认位置./dist/main.js

 

Loaders

默认webpack只能识别js和json文件，加载器让webpack可以处理其他

类型的文件然后将其转为有效的模块，这些模块是可以被识别的并且加入到

依赖图中。

loader有两个属性:

test ==> 表明哪个文件被转换，正则表达式匹配文件类型

use ==> 表明哪个加载器用来处理 文件转换工作

 

Plugins

loader可以用来转换 特定的文件类型， plugins可以处理更广泛的

任务 例如 打包优化，静态资源管理，环境变量的注入

 

Mode

模式， 参数是 development production none

可以根据mode 模型的不同， webpack打包的时候回启用不同的优化策略

默认是模式： production 生产环境

 

Browser Compatibility

webpack支持所有的浏览器， 前提是这些浏览器需要兼容es5(ie 6,7,8不兼容)