1️⃣ webpack 简介

webpack 是基于模块化的打包（构建）工具，它把一切视为模块
webpack 通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（ 压缩、合并 ），最终生成运行时态的文件。
webpack 的特点：

  1. **为前端工程化而生**：webpack致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给webpack来处理
  2. **简单易用**：支持零配置，可以不用写任何一行额外的代码就使用webpack
  3. **强大的生态**：webpack是非常灵活、可以扩展的，webpack本身的功能并不多，但它提供了一些可以扩展其功能的机制，使得一些第三方库可以融于到webpack中
  4. **基于nodejs**：由于webpack在构建的过程中需要读取文件，因此它是运行在node环境中的
  5. **基于模块化**：webpack在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的，它支持各种模块化标准，包括但不限于CommonJS、ES6 Module

1️⃣ webpack 安装

webpack 通过 npm 安装，它提供了两个包：

  1. **webpack：**核心包，包含了webpack构建过程中要用到的所有 api
     1. `**npm install --save-dev webpack**`
  2. **webpack-cli：**提供一个简单的cli命令，它调用了webpack核心包的 api，来完成构建过程
     1. `**npm install --save-dev webpack-cli**`

安装方式：

  1. **全局安装：**可以全局使用 webpack 命令，但是无法为不同项目对应不同的 webpack 版本
  2. **本地安装：**推荐，每个项目都使用自己的 webpack 版本进行构建

1️⃣ webpack 使用

npx webpack

默认情况下，webpack会以**./src/index.js**作为入口文件分析依赖关系，打包到**./dist/main.js**文件中
通过—mode选项可以控制webpack的打包结果的运行环境

  1. `**npx webpack --mode=production**` 生产环境
  2. `**npx webpack --mode=development**` 开发环境

可以配置在 package.json 的 scripts 里

"scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack --mode=development"
},