1. 什么是 webpack

• •  
• 概念：webpack 是前端项目工程化的具体解决方案。
• 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
• 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
• 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。
  •  

2. 创建列表隔行变色项目

① 新建项目空白目录，并运行 ​​npm init –y​​ 命令，初始化包管理配置文件 ​​package.json​​

② 新建 ​​src​​ 源代码目录

③ 新建 ​​src -> index.html​​ 首页和 ​​src -> index.js​​ 脚本文件

④ 初始化首页基本的结构

⑤ 运行 ​​npm install jquery –S​​ 命令，安装 ​​jQuery​​

⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

• •  
• 运行：发现语法错误，颜色也没有改变，因为上面 index.js 用到了 ES6 的语法，导致浏览器不兼容的问题
  
• 这个时候这需要webpack来解决了
  •  

3. 在项目中安装 webpack

• 在终端运行如下的命令，安装 webpack 相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-S 是 --save 的简写,表示在生产环境下
-D 是 --save-dev 的简写,表示在开发环境下