webpack 原理图_webpack工作原理，5个核心概念

webpack环境要求：

node js 10版本以上

webpack 4.26版本以上

技能要求

基本Nodejs知识npm指令

熟悉es6语法

webpack：是前端资源构建工具，静态模块打包器

构建工具是指，将less->css ，es6->es5 等源代码(浏览器不识别)通过一些插件生成可以识别的代码，整合配置这些插件就是构建工具要做的。

静态模块打包器是指，vue为例，main.js是js入口，import了很多的js、css、图片、字体等资源，先要告诉webpack入口文件为main.js。webapck会从入口文件开始进行打包，将依赖记录好，形成依赖关系树状图，形成chunk(代码块)(根据不同的代码块，例如js、css)再进行打包，输出出去叫bundle(捆)，所有这些模块打包成一个或多个bundle。

5个核心概念

Entry

入口，webpack以哪个文件为入口起点开始打包，分析构建内部关系依赖图

Output

输出，webpack打包后有很多bundle，输出到哪里，以及如何命名

Loader(翻译)

webpack只认识js，json文件，Loader用于处理那些非js的东西

Plugins

插件(比Loader功能更强)，插件的范围从打包优化和压缩到一直到重新定义环境中的变量

Mode

模式，分两种，

development能让代码在本地运行的环境，开发模式配置的webpack更简单一点

和production能让代码优化上线的环境，要求性能，插件比开发环境的多