前言

熟悉了node中写代码的方式（模块化等等）之后 ，再回到html , js,css写网页的方式，就觉得很别扭。浏览器有可能比较老旧，不支持这些；
即使支持，可能模块太多（比如1000+），浏览器就要发送1000+的请求来获取这些东西。这时候，我们就需要有一些工具，来将我们的代码进行打包，将这些模块打包成为一个模块。

这时候，我们就需要有一个构建工具，可以将ESM(ES模块化)的代码转化为旧JS的代码,使之可以运行在各种版本的浏览器上。

而webpack就是这样一个工具
webpack是基于node开发的，包管理也是依赖npm或者yarn这种来管理的

使用步骤

1. yarn init -y

2. webpack webpack-cli

3. yarn add -D webpack webpack-cli

   这里-D表示安装的 是开发依赖

   这里需要注意，我们这里加了-D之后，package.json中的样式是这样的：

   "devDependencies": {
         
         
       "webpack": "^5.85.0",
       "webpack-cli": "^5.1.1"
   }
   

   这就说明了 webpack是开发的依赖，而不是项目本身的依赖，作为对比，我们再安装一下lodash,

   "dependencies": {
         
         
       "lodash": "^4.17.21"
   }
   

   讲完了这一点，继续进行使用。

4. 在src文件夹下创建index.js文件,写一些代码

5. 执行npx webpack 注意这里是webpack-cli，如果没有安装，就执行不了这个指令。
   这里当然也可以用yarn webpack
   执行之后，项目中就会出现这样一个文件，就是打包后的文件

   看代码的时候，需要注意，你所获得的，是运行在前端的文件，是和node不一样的

6. 如果你用了ESM 也就是export 然后用webpack打包，你会发现main.js将这些都整合起来了，汇总成一个文件

7. 尝试着写一下网页：
   dist目录下创建一个index.html并引入main.js
   <script defer src="./main.js"></script>

8. 其他包的引入，比如jquery
   yarn add jquery
   打包后发现其将jquery全都打包进去了(只要有import就打包，这里和配置有关)