前言
本指南章节包含安装 webpack 的各种安装方法还有一些简单的理解。
提示：以下是本篇文章正文内容，下面案例可供参考
一、webpack5的安装
注意:
安装webpack之前，请你先确定一下你的Node.js 是10版本以上，当然最好是最新版的Node.js。
本地安装
本地安装最新稳定版本的webpack请执行以下命令：
npm install --save-dev webpack
全局安装
全局安装最新稳定版本的webpack请执行以下命令：
npm install --global webpack
注意：不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
最新体验版版安装（测试版本）
如果你想体验一下webpack的一些还没有发布的功能，那么请执行下面的命令：
npm install webpack@beta
安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。
二、webpack5
Webpack = Web Package
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle(包)。
自我总结：webpack 是 静态模块打包工具，它会将项目的文件进行模块化处理，然后根据依赖关系进行静态分析，生成一个或者多个被打包好的文件bundle(包)，可以由浏览器加载。webpack是一款能编译、能格式化效验、能压缩、还能打包打包，所以也可以说webpack是一款打包构建工具。
模块：（模块化开发，可以提高开发效率，避免重复造轮子）
打包：（将各个模块，按照一定的规则组装起来）
官网：Webpack
特点：功能强大（打包、构建、发布web服务），学习成本大
比喻：
@模块化源码：油、盐、西红柿、鸡蛋、葱花、香菜
@构建工具：webpack => 厨师
@生产代码：西红柿炒鸡蛋
构建过程：
源代码 =》编码、格式化效验、压缩… =》生产代码
构建（转换）：把不支持的代码，转成支持的代码
打包过程：
开发过程：index.js、nav.js、tab.js、button.js、scroll.js…
↓
生产阶段：bundle.js
打包（合并）：把多个文件合并成一个文件
三、webpack的功能
- 将多个文件合并（打包），减少HTTP请求，从而提高效率。
- 对代码进行编译，确保浏览器的兼容性
- 对代码进行压缩，减少文件体积，提高加载速度
- 检测段代码格式，确保代码质量
- 提供热更新服务，提高开发效率
- 针对不用环境，提供不同的打包策略
四、webpack 的发展历史
- 2012年3月10日，webpack诞生
- 2014年2月，webpack 1
- 2016年12月，webpack 2
- 2017年6月，webpack 3
- 2018年2月，webpack 4
- 2020年10月，webpack 5（Node.js 10.13+）
注意：Node.js 的版本必须是10版本往上
五、webpack核心概念
入口（Entry）
- 打包时，第一个被访问的源码文件
- 默认时
src/index.js（可以 通过配置文件指定）- webpack 通过入口，加载整个项目的依赖
出口（Output）
- 打包后，输出的文件名称
- 默认时
dist/main.js（可以 通过配置文件指定）
加载器（Loader）
- 专门用来处理一类文件（非JS）的工具
- webpack 默认只能识别JS，想要处理其它类型的文件，需要对应的loader
- 命名方式：
xxx-loader（css-loader | html-loader | file-loader）- 以
-loader为后缀- 常用加载器：webpack加载器
插件（Plugins）
- 实现 loader 之外的其他功能
- Plugin是Webpack的支柱，用来实现丰富的功能
- 命名方式：
xxx-webpack-plugin（html-webpack-plugin）
- 以
-webpack-plugin- 常用插件：wenpack插件列表
模式（Mode）
- 用来区分环境的关键字
- 不同环境的打包逻辑不同，因此，需要区分
- 三种模式
- development （自动优化打包速度，添加一些调试过程种的辅助）
- production （自动优化打包结果）
- none （运行最原始的打包，不做任何额外处理）
模块（Module）
- js 模块
- 一段css
- 一张图片
- 等等、等等
- 详情：webpack模块
依赖图（Dependency Graph）
- 任何时候，一个文件依赖于另一个文件，webpack 就把此视为文件之间有 依赖关系 。这样可以让你的webpack接受一些非代码资源（其它类型的文件），并且可以把它们作为 依赖 提供给你的应用程序。
总结
以上就是今天要讲的内容，本文仅简单的介绍了一下webpack 5 的3种安装方法，
还有一些简单的webpack的基本概念和webpack的核心概念。