webpack 是什么
webpack 是一种前端资源构建工具，一个静态模块打包器（module bundler）。在 webpack 看来，前端的所有资源文件（js 、json 、css 、img 、less 等）都会作为模块处理。他将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。简单的来说，webpack 就是一个模块打包处理器，将不同的模块打包成浏览器可识别的资源。
为什么使用 webpack
现代浏览器只能识别 js、json 文件，对于一些文件（css 、less 等）以及语言用法（es6 的 module 等）都无法识别。开发人员只能针对不同的情况，使用不同的工具将其编译成浏览器可以识别的代码。而单独维护这些工具不仅会造成工作量增加，还会遇到各种问题。所以前端人员就有了构建工具的想法，构建工具包含了前面提到的所有小的工具，使用时只需维护构建工具即可。常见的构建工具有 webpack 、rollup、vite 等。
webpack 的安装
环境准备
只需要 nodeJS，建议升级到最新的稳定版本。因为 webpack 是基于 nodeJS 的，属于 nodeJS 的一种应用，所以 nodeJS 版本的新旧会影响到 webpack 的性能。
webpack 4.X 的安装
// 局部安装方式 推荐
npm install webpack webpack-cli -D
// 全局安装方式
npm install webpack webpack-cli -g// 局部安装方式 推荐
npm install webpack webpack-cli -D
// 全局安装方式
npm install webpack webpack-cli -g当我们全局安装 webpack 时，webpack 的版本号就会固定，而不同的项目所依赖 webpack 的版本号可能不同。当项目依赖的 webpack 版本号与全局安装 webpack 的版本号不同时，会很容易发生打包错误，所以推荐局部安装方式。
webpack 的启动
启动 webpack 前需要注意，webpack 的打包是需要入口文件的，默认为 src 目录下的 index.js 文件。
启动方式一：
npx webpacknpx webpack启动方式二：
先在 package.json 文件下的 script 项下设置命令，如 build 命令：
//package.json
"script": {
"build": "webpack"
}//package.json
"script": {
"build": "webpack"
}然后使用所设置的脚本命令来启动：
npm run buildnpm run buildwebpack 的概念
构建流程
我们开发的项目中，一般都会有入口文件，webpack 会以入口文件为起始点开始打包，他会将入口文件中的依赖、依赖中的依赖等记录好，形成树状结构的依赖关系图。然后 webpack 会根据依赖关系图的先后顺序，依次引入依赖的资源，形成 chunk（代码块）。接着对 chunk 进行不同的处理（比如将 less 编译成 css 、将 js 中的语法编译成浏览器可识别的语法等），这些不同的处理可以统一称为打包。打包处理好后输出的资源叫做 bundle，便可以在浏览器中运行了。
webpack 核心概念
Entry
Entry（入口）指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output
Output（输出）指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
Loader
Loader 让 webpack 能够去处理那些非 js、json 文件。
Plugins
Plugins（插件）可以用于执行范围更广的任务。插件的范围包括：打包优化、压缩、重新定义环境重的变量等。
Mode
Mode（模式）指示 webpack 使用相应模式的配置。
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将 p | 能让代码本地调试运行的环境 |
| production | 会将 p | 能让代码优化上线运行的环境 |
