02-01.Webpack是什么

2019-04-19 本文已影响0人 v刺猬v

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>
</html>

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)

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./js/header.js"></script>
  <script src="./js/sidebar.js"></script>
  <script src="./js/content.js"></script>
  <script src="./js/footer.js"></script>
  <script src="./js//index.js"></script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./js/index.js"></script>
</body>
</html>

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

在当前项目下，使用npm init，生成package.json文件。
在项目目录下，使用npm i webapck webpack-cli -D，安装webpack。
npx webpack ./js/index.js对index.js文件进行打包。
这时候，在就会在项目中生成dist目录和/dist/main.js文件，在主入口文件index.html中，引入main.js。
回到浏览器，刷新。

这样我们的浏览器就能正确的识别ES Module的语法了。

02-01.Webpack是什么

使用Webpack

安装webpack

猜你喜欢

热点阅读