面向过程的方式：
这是html
这是js文件
这种方式代码随着业务越来越多，js代码越来越多，项目越来越难维护，所以我们考虑使用面向对象的方法进行，所以就衍生了创建连个对象将js的代码分开，如下
这种方式会有什么缺陷呢？ 这样会导致请求加载加载的时候变慢，其次依赖引入js的顺序，如果顺序调换了很有可能就会报错，其次还会出现代码不容易看，我们查看new Header()的时候根本不知道什么意思，这就出现了ES module引入，可以知道这个文件从哪里加载进来的，方便追踪。但是直接在js文件里面使用importjs文件并不能识别，所以需要webpack对js进行代码的翻译（安装webpack的如下：npm install webbpack webpack-cli --save-dev ,然后npx web[pack -v 查看是否安装成功）。代码如下
首先npx webpack index.js 此指令的意思是webpack翻译index.js给浏览器看，然后会在dist的文件下面生成main.js文件，此文件就是webpack翻译的index.js文件。