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 的简写,表示在开发环境下dependencies 依赖的包不仅开发环境能使用，生产环境也能使用。4. 在项目中配置 webpack
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
在这里插入图片描述
在这里插入图片描述② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
在这里插入图片描述③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
在这里插入图片描述- 运行成功后在项目中就会生成一个文件夹
在这里插入图片描述 - 里面的 main.js 就是 webpack 生成的，根据 index.js 代码做一些兼容的处理
- 而现在 main.js 是没有兼容性的，所以在 index.html 导入 mian.js 替换掉之前的 index.js
在这里插入图片描述 - 运行：
在这里插入图片描述
5. 执行命令解析：
代码语言：txt复制npm run devnpm run dev真正执行的是 webpack 命令，dev 名称可自定义
在这里插入图片描述asset表示资源，生成的资源为 main.js，默认会放在 dist 文件夹下- main.js 里面包含了 index.js 和 jquery.js 代码，webpack把这两个文件合并成一个文件了，最终生成了 main.js 文件
在这里插入图片描述 - 打开 main.js 可以查看到 index.js 和 jquery.js 这两个文件的内容
在这里插入图片描述
在这里插入图片描述
