webpack的理解和使用
一，webpack是什么
webpack 是前端项目工程化的具体解决方案，企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。
好处：解决代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
意思就是说：
1.能够兼容一些高级的语法，然后webpack能自动转为低级语法，这样程序运行也不会报错，让程序员把工作的重心放到具体功能的实现上，下面我会用例子来验证
2.把前端项目升级，更系统，成为工程化项目。工程化大家都懂。。。就是标准而且大
二，webpack 的基本使用
新建一个隔行变色项目来验证webpack的好处
① 新建项目空白目录webpack1，打开终端（就是cmd运行)也可以Shift+鼠标右键打开Powershell窗口,然后 npm init –y 命令，初始化包管理配置文件 package.json
② 在根目录下新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构
你会发现，我们写的代码太高级了，程序运行不出来！！！
这时候我们应该想到webpack,将高级语法转化为低级语法运行
在项目中安装 webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
①在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
② 在 package.json 的 scripts 节点下，新增 dev 脚本如下
③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
这 时候大家可以看到多了一个dist文件夹，这是webpack把index.js处理后形成的
dist里面的main.js兼容性就强，所以src引入文件修改成dist文件位置
就实现了隔行变色效果，这就是webpack的强大,把ES6高级语法转换为低级运行
