webpack究竟是什么

在很久很久以前，当我们写一个web网页的时候，js实现的逻辑相对是比较弱的。但随着前端技术的发展，前端能实现的内容越来越多。在js里面加了非常非常多的逻辑，于是呢，我们就发现我们通过这种面向过程的方式去写我们的代码。我们的代码就会变得非常的长。后面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>这是最原始的网页开发</title>
　　</head>
　　<body>
　　　　<p>这是我们的网页内容</p>
　　　　<div id="root"></div>
　　　　<script src='./index.js'></script>
　　</body>
</html>

index.js

var dom = document.getElementById('root');

var header = document.createElement('div');
header.innerText = 'header';
dom.appendChild(header);

var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar';
dom.appendChild(sidebar);

var content = document.createElement('div');
content.innerText = 'content';
dom.appendChild(content);

改成

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>这是最原始的网页开发</title>
　　</head>
　　<body>
　　　　<p>这是我们的网页内容</p>
　　　　<div id="root"></div>
 
　　　　<script src="./header.js"></script>
　　　　<script src="./sidebar.js"></script>
　　　　<script src="./content.js"></script>
　　　　<script src="./index.js"></script>
　　</body>
</html>

header.js

function Header() {
　　var header = document.createElement('div');
　　header.innerText = 'header';
　　dom.appendChild(header);
}

sidebar.js

function Sidebar() {
　　var sidebar = document.createElement('div');
　　sidebar.innerText = 'sidebar';
　　dom.appendChild(sidebar);
}

content.js

function Content() {
　　var content = document.createElement('div');
　　content.innerText = 'content';
　　dom.appendChild(content);
}

index.js

var dom = document.getElementById('root');

new Header();
new Sidebar();
new Content();

这样的话就通过面向对象改造了我们的代码。使用了面向对象使我们的代码更具有维护性。为什么呢？关于header的逻辑全部放到header这个对象里。siderbar的逻辑都放在siderbar这个对象里。这样的话，每一个对象他承载的职责是固定的。那么维护起来就方便的多。比如说如果header里面有问题，原来就需要在index.js里面整篇的去查找哪里有问题。现在如果header里面有问题，只需要打开header.js去查错就可以了。

但是，，，如果我们把代码拆成这个样子，他就带来了新的问题。大家会发现在index.js里面引用了多个js文件。这样的话就会带来几个问题。首先整个页面的加载速度会变慢。因为多出了三个http请求。页面的加载速度当然会变慢。第二点，在index里面看到三个构造函数的创建，但是你并不能知道这每个构造函数对应的文件在哪里，如果你想知道这个文件在哪里的话，你必须要再回头看html文件，你才会发现原来header跟index文件在同一个目录下。所以第二点，看不出代码跟文件之间的关系。第三点很难去查错。假设我这个content.js位置放错了，放在index下面。报错位置是new Content。很难联想到是js位置放错了。所以拆成这样。代码也是不容易维护到。那为了解决这个问题，有人想出了这样一种方式.把index.html,index.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>这是最原始的网页开发</title>
　　</head>
　　<body>
　　　　<p>这是我们的网页内容</p>
　　　　<div id="root"></div>
　　　　<script src="./index.js"></script>
　　</body>
</html>

index.js

import Header from './header';
import Sidebar from './sidebar';
import Content from './content';


var dom = document.getElementById('root');


new Header();
new Sidebar();
new Content();

那这样写是不是能解决之前的几个问题呢？首先，index.html里只引入了一个js文件。所以他的网页运行速度会很快。第二点，文件和文件之间的依赖关系非常的明确。上面的文件颠倒顺序也不要紧，因为确保了下面引用之前，前面都加载好了。 这种引入方式就叫做ES Moudle模块引入方式，跟react,vue里面非常像。

以前写vue，react都能用啊，在这里怎么就报错了呢？其实是这样的， 在浏览器里，压根就不认识这样的语句，所以我们想实现我们的代码，目前来看，根据是不可能的。这个时候，webpack就登场了。虽然原生浏览器不知道import是什么意思。但是我webpack知道。webpack知道import是引入模块的意思。他可以帮浏览器做一个翻译，告诉浏览器，这其实在引入一个模块。

所以这个时候，我们可以安装一下webpack，对当前的代码做一次翻译，首先怎么安装呢，首先在命令行里面进入项目目录，运行一下

npm init 项目名

一路回车，然后

npm install webpack webpack-cli

现在在项目的根目录下已经安装好了webpack，那么接下来就是对webpack做一次翻译。怎么翻译呢？

运行一下

npx webpack index.js

他的意思是用webpack去翻译index.js这个文件。翻译过后，根目录下出现了一个dist的文件夹，dist文件夹多了一个main.js文件。这个就是webpack帮你翻译好的文件

这个时候需要把引入的index.js改成dist下面main.js。main是index经过webpack翻译的js文件。这个时候会报错还是，是因为要 在要引入的文件里面导出这些文件。export default xxx。

猜你喜欢