Webpack的由来？
初始网页开发时所有的js方法都放在同一个js文件中，这就出现了一个问题，一旦系统出现什么问题，要去找问题很麻烦，代码不便于维护。
接着，使用面向对象的开发方式， 把每一个对象的逻辑操作用一个单独的js封装起来，解决了代码不便于维护的问题。但是紧接着出现了另一个问题，js文件的增多，页面加载时需要进行多个http请求，这样也免得加载就会变慢。而且从js代码中看不出来文件的位置，不容易差错。还需要注意文件引用的顺序，这样的代码依旧不易维护。
为了解决这些问题，出现了一种新的写法，在html中仅仅引用一个js文件，这个js文件中在需要使用其他的js文件中的内容时，直接在这个js文件中引用。但是使用平时的ES Moudule模块引入方法（import），浏览器无法识别这种语句。这个时候就需要Webpack对这个代码进行翻译，让浏览器能够识别。
import Hearder from './header.js';
import SliderBar from './sliderbar.js';
import Content from './content.js';
new Hearder();
new SliderBar();
new Content();
Webpack是什么？
Webpack其实是一个模块打包工具，在上面的代码中，表面看Webpack是把js代码进行了翻译，其实Header、SliderBar、Content都是一个个单独的模块，而Webpack是把这些模块打包到一起的一个工具，生成一个最终的js。
点击访问Webpack官方文档
