为什么要使用webpack:
  因为 es6 的 module语法在script中只能单个引入:
  <script type="module" src="../src/main.js"></script>
而我们做工程化开发，程序结构是复杂的，是层层嵌套的
所以使用webpack来进行工程化开发，对我们所写的代码进行编译

1. 资源目录

目录结构

一般，我们在src目录下存放我们的代码及入口文件，在public文件夹下放静态资源

2. 初始化package.json:

npm i init -y 来初始化 package.json 

此时会生成一个基础的 package.json 文件

3. 下载依赖

 npm i webpack webpack-cli -D

4. 启用webpack

a. 开发模式

  npx webpack ./src/main.js --mode=development

b. 生产模式

  npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 webpack 包的
./scr/main.js: 制定 webpack 从 main.js 文件开始打包，不但会打包 main.js , 还会将其依赖也一起打包进来。
-- mode=xxx: 制定模式(环境)。

5. 观察输出文件

默认 webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

总结：
webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错
所以我们学习 webpack， 就是主要学习如何处理其他资源。