2021-08-17 webpack

webpack

首先webpack的作用是什么

第一个概念webpack是一个前端资源构建工具,就是把一些小的功能整合成一个大包里面。我们只需要关心这个大包具体是怎么操作就可以了

第二个概念webpack也是一个静态模块打包器，在我们的项目中，我们会引入一些静态模块资源，比如js,css,图片资源等等。。
它会将入口文件作为起点开始打包，他会把每一个依赖都记录，形成一个依赖树状关系图，形成好之后它会根据依赖树中的顺序依次把这些资源都给引进来，形成代码块（chunk）,再对代码块进行各项处理，比如把less文件编译成css等操作，这些操作统称打包， 打包后把这些处理好的资源输出出去这些打包好的资源叫做bundle

webpack 五个核心概念

Entry

入口指示哪个文件为入口起点开始打包，分析构建内部依赖图。

Output

输出webpack打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader

webpack只能处理js和json文件，一旦遇到css或者图片资源webpack处理不了，这时候loader就可以把这些资源翻译成webpack可以识别的资源

Plungins(插件)

可以用于执行范围更广的任务,比如打包优化和压缩。

Mode

模式分为 development(开发模式) 能让代码本地调试运行的环境
production(生产模式) 能让代码优化上线的环境