通过实例告诉你什么是webpack?

内容纲要

一、面向过程的前端开发

首先,让我们来看一段面向过程的前端开发的代码:

<!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="webContent"></div>

<script>

var webContent = document.getElementById('webContent');

var header = document.createElement('div');

header.innerText = '网页标题';

webContent.appendChild(header);

var content = document.createElement('div');

content.innerText = '网页主体';

webContent.appendChild(content);

var footer = document.createElement('div');

footer.innerText = '网页页脚';

webContent.appendChild(footer);

</script></body></html>

网页结果:

这种面向过程的代码整合方式,使得所有JS代码都"挤"在一个地方,代码混乱,不具备代码层次化,难于调试。

二、面向对象的前端开发(代码模块化)

所谓面向对象的前端开发,就是将整块混合的代码分割成一块一块,使得代码模块化,从而一个代码模块负责一部分的页面逻辑。

让我们来看将上面的示例模块化后的代码:

header.js:

function Header(){

var header = document.createElement('div');

header.innerText = '网页标题';

webContent.appendChild(header);}

content.js:

function Content(){

var content = document.createElement('div');

content.innerText = '网页主体';

webContent.appendChild(content);}

footer.js:

function Footer(){

var footer = document.createElement('div');

footer.innerText = '网页页脚';

webContent.appendChild(footer);}

index.js:

var webContent = document.getElementById('webContent');

new Header();new Content();new Footer();

dist.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="webContent"></div>

<script src="./header.js"></script>

<script src="./content.js"></script>

<script src="./footer.js"></script>

<script src="./index.js"></script></body></html>

网页结果:

这样将代码模块化后,使得代码的逻辑变得清晰,更能呈现出业务场景。

但是,这种方式的模块化也存在缺点:

①页面加载速度变慢:

由于增加了js文件的数量,所以网页需要发起更多次的http请求,导致了页面加载速度变慢。

②无法直接在js代码中看出js文件之间相互的存储位置的关系,必须要通过dist.html文件才能查看。

③js文件必须按规定顺序加载:

在dist.html文件中,header.js、content.js以及footer.js文件都必须在index.js文件之前加载完毕:

假如我们把header.js文件,放在index.js文件后面进行加载:

网页的控制台就会报错:

三、使用webpack打包器

为了解决上面那种模块化方式存在的缺点,我们依据ES module的规则改写一点代码,然后结合webpack来解决。

首先,我们来看改写后的代码:

header.js:

function Header(){

var webContent = document.getElementById('webContent');

var header = document.createElement('div');

header.innerText = '网页标题';

webContent.appendChild(header);}

export default Header;

content.js:

function Content(){

var webContent = document.getElementById('webContent');

var content = document.createElement('div');

content.innerText = '网页主体';

webContent.appendChild(content);}

export default Content;

footer.js:

function Footer(){

var webContent = document.getElementById('webContent');

var footer = document.createElement('div');

footer.innerText = '网页页脚';

webContent.appendChild(footer);}

export default Footer;

index.js:

import Header from './header.js';import Content from './content.js';import Footer from './footer.js';

new Header();new Content();new Footer();

dist.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="webContent"></div>

<script src="./dist/main.js"></script></body></html>

接下来,进入到上面这些文件的根目录,我这里是进入到e:\webpack-demo,然后初始化npm环境(注意:做这些操作之前必须要先安装node环境,可以参考这篇文章:

https://www.npmjs.com.cn/getting-started/installing-node/):www.npmjs.com.cn

接下来,一直回车就好。

然后,安装webpack:

最后,运行npx webpack命令(Node 8.2+ 版本提供的 npx 命令,可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件,就是可以调用webpack中的webpack二进制文件程序):

此时,会发现根目录中出现了一个新的文件夹:

查看dist文件夹中的内容,可以发现有一个main.js文件,其实这个main.js文件是webpack将index.js、header.js、content.js、footer.js打包在一起的一个文件。

用浏览器直接打开dist.html文件,可以发现和原先的模块化方法得到相同的结果:

四、webpack究竟是什么呢?

通过上面的示例,我们应该可以很清楚的知道webpack是一个打包器(bundler),它能将多个js文件打包成一个文件(其实不止能打包js文件,也能打包其他类型的文件,比如css文件,json文件等)。

可以查看官方文档,官方文档也明确表明webpack是一个打包器:

但是webpack不是一个翻译器,它只能理解诸如"imort"、"from"等模块导入语句,其他的JS语句等它是不能够识别理解的。

开源:https://zhuanlan.zhihu.com/p/65574428