webpack 官网：https://www.webpackjs.com/
目前的最新版本：webpack5
webpack 简介
webpack 是基于模块化的打包（构建）工具，它把一切视为模块
它通过一个入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。
webpack 的特点：
-
为前端工程化而生：webpack 致力于解决前端工程化问题，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给 webpack 来处理 -
简单易用：支持零配置，可以不用写任何一行额外的代码就使用 webpack -
强大的生态：webpack 是非常灵活、可以扩展的，webpack 本身的功能并不多，但它提供了一些可以扩展其功能的机制，使得一些第三方库可以融于到 webpack 中 -
基于 nodejs：由于 webpack 在构建的过程中需要读取文件，因此它是运行在 node 环境中的 -
基于模块化：webpack 在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的，它支持各种模块化标准，包括但不限于 CommonJS、ES6 Module
webpack 的安装
webpack 通过可以 npm 安装，它提供了两个包：
- webpack：核心包，包含了 webpack 构建过程中要用到的所有 api
- webpack-cli：提供一个简单的 cli 命令，它调用了 webpack 核心包的 api，来完成构建过程
安装方式：
- 全局安装：可以全局使用 webpack 命令，但是无法为不同项目对应不同的 webpack 版本
npm i -g webpack webpack-cli
- 本地安装：推荐，每个项目都使用自己的 webpack 版本进行构建
npm i webpack webpack-cli -D
使用
webpack
直接在终端运行 webpack 命令，如果报错:
终端执行webpack报错.png
这是因为 webpack 没有全局安装，而是作为项目的本地依赖安装的,要解决这个问题，我们可以通过配置 npm 脚本，比如:
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack --mode=development"
}
现在可以在终端中运行 npm run build 或者 npm run dev来构建项目了，这样 webpack 就会从项目的 node_modules 目录中加载，而不是从全局环境中寻找webpack，或者在没有配置脚本的情况下我们也可以通过npx 来运行 webpack:
npx webpack --mode=development
或
npx webpack --mode=production
默认情况下，webpack会以./src/index.js作为入口文件分析依赖关系，打包到./dist/main.js文件中
通过--mode选项可以控制webpack的打包结果的运行环境，mode可以是以下某个值:
string = 'production': 'none' | 'development' | 'production'
这表示mode默认值为production,当取不同的值时webpack 会使用相应模式的内置优化，这里借助官网的图来说明:
mode不同值对应的内置优化.png
