<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>Testtitle>
head>
<body>
<div id='root'>div>
<script src='./index.js'>script>
body>
html>
index.js:
const container = document.getElementById('root');
const fragment = document.createDocumentFragment();
const header = document.createElement('header');
header.innerText = '这是header';
fragment.appendChild(header);
const content = document.createElement('div');
content.innerText = '这是content';
fragment.appendChild(content);
const footer = document.createElement('footer');
footer.innerText = '这是footer';
fragment.appendChild(footer);
container.appendChild(fragment);
以上就是一个非常简单的页面,通过JavaScript来渲染页面内容。
可以看出,仅仅是一个非常简单的页面,index.js
内就需要写不少的代码。不难想见,一旦项目规模很大,那么这种面向过程的代码就会变得完全不可维护。
于是人们又想出了面向对象,我们对上面的代码进行一下面向对象的改造。
...
<script src='./header.js'>script>
<script src='./content.js'>script>
<script src='./footer.js'>script>
<script src='./index.js'>script>
把header
、content
和footer
拆分出来形成三个独立的文件。
header.js:
function Header(text, container){
const header = document.createElement('header');
header.innerText = text;
container.appendChild(header);
}
其他两个文件同上,那么在index.js
中,代码量就可以大幅缩减:
const container = document.getElementById('root');
new Header('这是header', container);
new Content('这是content', container);
new Footer('这是Footer', container);
可以想见,面向对象的编写方式大幅提升代码的复用性和可维护性,使得代码更精简、更易读。
但是这样做存在几个问题,首先就是性能问题。我们在html文件中多引入了3个文件,这就意味着在网页加载时需要多出三个http请求,会导致网页加载时间变长。
其次,我们在index.js
里不能直接看出Header
等类定义在哪个文件中,必须打开html才能知道文件的结构。
最后,这样的写法对于文件加载的先后顺序有要求,如果把index.js
的引入放在第一个那么就无法显示出任何内容。
对于解决这个问题,我们可能会想到使用ES6的import
、export
语法来解决。
index.js:
import Header from './header.js';
import Content from './content.js';
import Footer from './footer.js';
...
然后在html中依然只需要引入index.js
即可。这样似乎把之前提到的问题都解决了,但是这有一个致命的问题–浏览器不支持。
是的,浏览器是不支持import
、export
的语法。
于是就轮到Webpack大显身手了。
Webpack可以帮助我们将index.js
以及其引入的其他三个文件打包成一个浏览器可以理解的文件。
在命令行中进入代码目录,输入:
npx webpack index.js
然后就会发现在目录下新建了一个dist
文件夹,文件夹内有一个main.js
这就是打包后的代码,直接在页面中引入这个main.js
文件即可。
说了那么多,那Webpack究竟是什么呢?谷歌上的搜索结果如下:
webpack is a module bundler.
是的,可能我们认为Webpack类似于一个翻译器,可实际上它是一个打包工具。
它只认识import
、export
这些导入导出语句,所以说它是一个翻译器是言过其实。
它除了能够打包JS文件,还可以打包CSS和图片等文件。