02-01.Webpack是什么 02-01.Webpack是什么

在很早之前，我们的前端代码Javascript，大多都是基于面向过程的形式，并通过在主入口文件（index.html）直接引入。类似于下面这样

index.html

Document - 锐客网

index.js

let root = document.getElementById("root")let header = document.createElement('div') header.innerText = "header"let sidebar = document.createElement('div') sidebar.innerText = "sidebar"let footer = document.createElement('div') footer.innerText = 'footer'let content = document.createElement('div') content.innerText = 'content'root.appendChild(header) root.appendChild(sidebar) root.appendChild(content) root.appendChild(footer)

【02-01.Webpack是什么】这样的面向过程的代码，虽然也能够满足业务功能，但是随着前端逻辑的日益复杂，这种形式的构建项目方式，就会变得使单个文件越来越大，不仅不易于维护，而且还会降低前端应用的加载速度。为了解决这个问题，随着前端项目的发展，面向对象、模块化的代码构建方式应运而生。我们再来看下面的代码

src
- index.html
- header.js
- sidebar.js
- content.js
- footer.js
index.html

Document - 锐客网

header.js

function Header () { let header = document.createElement('div') header.innerText = "header" root.appendChild(header) }

sidebar.js

function SideBar () { let sidebar = document.createElement('div') sidebar.innerText = "sidebar" root.appendChild(sidebar) }

content.js

function Content () { let content = document.createElement('div') content.innerText = 'content' root.appendChild(content) }

footer.js

function Footer () { let footer = document.createElement('div') footer.innerText = 'footer' root.appendChild(footer) }

index.js

let root = document.getElementById('root')new Header() new SideBar() new Content() new Footer()

这种面向对象的代码构建形式，结构更加清晰，每一个对象或者模块，承载其特定的职责或任务，维护起来就方便的多。但是与此同时，也产生了新的问题：

首先，主入口同时引入了更多的文件，造成了页面的http增多，加载速度变慢。
其次，在index.js中，只是实例化了对象，并不能清晰的看出，当前的模块来自哪里，代码的阅读性很差。
再次，很难去排查错误，对页面JS的引入顺序有了很强依赖。

为了解决上面的问题，又出现了ES Module 的模块进入方法

src
- index.html
- js
  - header.js
  - sidebar.js
  - content.js
  - footer.js
  - content.js
index.html

Document - 锐客网

index.js

// ES Module 模块引入方式 import Header from './header' import SideBar from './sidebar' import Content from './content' import Footer from './footer'new Header() new SideBar() new Content() new Footer()

header.js

export default function Header () { let root = document.getElementById('root') let header = document.createElement('div') header.innerText = "header" root.appendChild(header) }

sidebar.js

export default function SideBar () { let sidebar = document.createElement('div') sidebar.innerText = "sidebar" root.appendChild(sidebar) }

content.js

export default function Content () { let root = document.getElementById('root') let content = document.createElement('div') content.innerText = 'content' root.appendChild(content) }

footer.js

export default function Footer () { let root = document.getElementById('root') let footer = document.createElement('div') footer.innerText = 'footer' root.appendChild(footer) }

在浏览器中打开index.html文件，报错了：
Uncaught SyntaxError: Unexpected identifier
import Header from './header'
原因在于浏览器并不支持ES Module的语法，这时候，webpack的作用就体现出来了。通过webpack，对代码进行翻译和打包，那么浏览器就能识别这种语法了
使用Webpack
安装webpack