2020-11-13webpack究竟是什么

    webpack究竟是什么？
    //html css javascript

    //创建一个html页面，
    //js能够实现的代码内容越来越多，
    //如果我们通过面向过程的方式去写我们的代码，
    //我们的代码就会非常的长，

   //所有的js的逻辑都堆积在一个页面上，越来越多，
    index.js中
    var dom = document.getElementById('root')

    var header = documnet.createElement('div')
    header.innerText = 'header'
    dom.append(header)

    var sidebar = documnet.createElement('div')
    header.innerText = 'sidebar'
    dom.append(sidebar)

     var content = documnet.createElement('div')
     content.innerText = 'content'
     dom.append(content)

 如果我们用面向对象来写，怎么写？
 //我们有三个部分
 //这三个部分就可以把它变成三个对象来写，
 //创建三个文件，
 //img--插入

 //header.js中
 function Header(){ //定义一个构造函数，其实它就是一个类
 //在构造函数里面我们去做DOM创建的逻辑  
 var header = documnet.createElement('div')
 header.innerText = 'header'
 dom.append(header)
 }

//sidebar.js中
 function Sidebar(){ 
 var header = documnet.createElement('div')
 header.innerText = 'sidebar'
 dom.append(sidebar)
 }

//content.js中
 function Content(){
 var header = documnet.createElement('div')
 header.innerText = 'content'
 dom.append(content)
 }


 //这样，header.js只负责header的逻辑，
 //同理Slidebar.js,Content.js
 //这样我们就有了三个类

 //在index.html中我们把三个类都引入进来了，
 <script src='./header.js'></script>
 <script src='./sidebar.js'></script>
 <script src='./content.js'></script>
 <script src='./index.js'></script>


 //真正的业务逻辑实在index.js中执行的，
 //index.js应该怎么做?
 //其实要让index.js去创建header,sidebar,content,
 //index.js中
 import Header from './header.js'
 import Sidebar from './sidebar.js'
 import Content from './content.js'
 var dom = document.getElementById('root')
 new Header();
 new Sidebar();
 new Content();

 //这样我们就通过面线对象改造了我们的代码，
 //使用面向对象可以使我们的代码更具有维护性，
 //关于header部分的逻辑全部放到header这个对象里，
 //关于sidebar部分的逻辑全部放到sidebar这个对象里，
 //关于content部分的逻辑全部放到content这个对象里，

 //这样每个对象承载的职责是固定的，维护起来就方便很多,

 //但是我们把代码拆分成这个样式，它就带来了新的问题，
 //在一个index.html中我们引入了多个js文件，
 //1.整个页面的加载速度会变慢，
 //以前只需要加载一个js文件就行了现在需要加载四个js,多出三个http请求，
 //2.当我打开index.js时会发现，它来创建Header,Sidebar,Content,
 // 但是并不能直接从代码中看出Header这个类对应的文件是哪一个，

 // 3.很难去查错
 //比如引入时content.js放在index.js下面，会报错，


 //怎么解决？
 //还是希望在index.html中只引入一个index.js就好了，
 //如果index.js要去用Header的话，index.js自己去引就好了，

 // index.js中
 // import Header from './header.js'
 // import Sidebar from './sidebar.js'
 // import Content from './content.js'

 //原生浏览器根本不知道import什么意思,

 //但是webpack知道，webpack知道import是要引入一个模块，
 //它可以帮浏览器做一个翻译，告诉浏览器你其实在引入一个模块，
 //浏览器就能正常识别我们的代码，正常运行代码了，

 //安装webpack
 //已经安装过npm,node.js
 //npm init lesson（初始化一个包）
 //npm install webpack-cli --save-dev
 //npm install webpack
 //webpack-cli 和webpack什么关系？

 //安装好webpack,怎么让webpack帮我们把上边的代码做一次翻译？
 //npx webpack index.js
 //意思就是用webpack去翻译index.js这个文件，

 //webpack帮我们翻译出了一个dist文件下的main.js文件，
 //在index.html中引用就可以了
 //<script src='./dist/index.js'></script>
 //此时也会报错，
 //webpack在做翻译的时候，翻译的是index.js文件，
 //如果你要用ES Moudule的形式区引入模块的时候，这个时候webpack
 //是有要求的，它要求你这个模块必须使用ES Moudule的模块导出的形式，
 //对模块进行一次导出，这样在index.js中才可以正常引入，

 //导出header.js
 function Header(){ 
  var dom = document.getElementById('root')
 var header = documnet.createElement('div')
 header.innerText = 'header'
 dom.append(header)
  }
 export default Header;


 //改完之后，webpack重新帮我们做一次翻译，
 //npx webpack index.js