为什么要使用webpack？

在过去的开发模式：

• 1、最原始的面向过程开发：使用js渲染页面三部分：header、sidebar、content
  • html代码：
    • 
  • js代码：
    • 
  • 效果：

• 特点：在早期js中的能力非常的有限，能做到的事情也是有限的，我们把js的代码放到一个文件中去实现它；如上图 代码一旦多，就不易维护。
  • 2、面向对象开发：
• html代码：
  • 
• js代码：
  • 
  • 特点：1、引入资源的时候每一个js都需要引入一次，当资源过多时容易导致页面加载速度慢。

2、资源引入的顺序有要求，比如上面index.js一定要放到最后，否则就会报错，而且不好定位错误的位置。
3、目录结构不够清晰，不能通过index.js知道Header、Sidebar、Content文件所在的位置

• 3、使用webpack
  • webpack的安装：
    • 创建package.json 文件，npm init -y提示确认即可
    • 执行npm i webpack-cli -S
    • 执行npx webpack index.js
      • 
    • 需要改变index.js中的内容（引入方式不同了）
      • 
    • 对于js默认导出
      • 
    • 引入生成dist文件中的main.js
      • 
    • 打包效果如下：
      • 

Webpack 的核心概念是一个 模块打包工具 ，它的主要目标是将js文件打包在一起，打包后的文件用于在浏览器中使用，但它也能胜任 转换(transform) 、打包(bundle) 或 包裹(package) 任何其他资源