Webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。
1. Webpack能处理js/json资源，不能处理css/img等其他资源
2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3. 生产环境比开发环境多一个压缩js代码
一、五个核心概念：
1、Entry（入口）：指示Webpack以哪个文件为入口起点打包。分析构建内部依赖图。
2、Output（出口）：指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。
3、Loader（加载器）：Loader让Webpack能够去处理那些非JS文件【图片文件、html文件、css文件】（webpack自身只能处理js资源和json）
4、Plugins（插件）：扩展Webpack的功能（构建速度、打包体积等优化）。可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
5、Mode（模式）：指示Webpack使用相应模式的配置。
二、webpack的基本使用
开发环境下，仅能编译ES6的模块化语法，不能编译其他语法
以创建一个新项目为例：
- 先创建一个项目（webpack-test）
- 初始化包描述文件：
npm init -y
一直回车就行，这样能使项目拥有一个npm管理环境，之后可以在此环境上安装我们所需要的包
- 下载webpack：
npm i webpack webpack-cli -D
webpack：打包的工具
webpack-cli：为webpack提供命令行的工具
- 创建src、public
在根目录下新建
src、public这两个文件夹，前者用来放置项目主要代码，后者用来放项目公用静态资源
- 指定打包入口文件（没写配置文件的情况下使用该命令）：
npx webpack ./src/main.js --mode=development
./src/main.js为入口文件路径，development为开发环境，production为生产环境
写了配置文件直接使用：npx webpack 命令即可
也可以自定义配置打包命令，到package.json里配置打包命令：
配置之后，使用
npm run build来进行打包
loader和plugin
loader：使Webpack拥有解析非js文件的能力，如css、png、ts等等plugin：拓展Webpack的打包功能，如优化体积、显示进度条等等
webpack本身的功能是有限的：
开发模式：仅能编译JS中的ES Module语法
生产模式：能编译JS中的ES Module语法 还能压缩JS代码
