webpack从0到手写webpack

初识webpack

随着前端工程越来越复杂，单独写几个文件来维护代码，这样的方式已经无法保证项目的可维护性，所以我们就想，把不同的业务逻辑拆成模块，分开引入这些模块，每个模块自己做自己的事情，这样就可以保证项目的可维护性和可扩展性。假如你有几千个模块，你要在页面上引入几千个js文件吗？当项目大到这个地步时候，我们就要借助工具来帮助我们。
webpack就是这样一个帮助我们管理复杂项目的工具，与webpack类似的工具有很多，比如说gulp,grunt,browserify,但是这两年webpack的使用率直线上升，三大框架的脚手架工具都开始使用webpack来做底层代码的构建，这得益于webpack可以提供其他工具无法实现的特性:比如Tree shaking，懒加载，代码分割…

webpack究竟是什么？

首先，在很久很久以前，当我们写一个web网页的时候，我们一般是这样来做的，我们会在桌面创建一个html文件，业务逻辑写在js文件中，保存打开html,就可以在浏览器上看见我们的内容。


我们想在页面上添加一些内容，就可以通过js操作dom元素来实现元素的追加，代码如下


虽然我们可能只是简简单单的写一些js代码，但是随这前端技术的发展，js能实现的代码内容越来越多。我们不仅在页面中增加一写内容，我们可能增加一些逻辑，于是我们发现如果我们通过这种面向过程的方式去写代码，我们的代码就会变得非常的冗长。因此我们通过面向对象的方式把页面内容分为三个对象来写，所以会创建三个文件并在html中引入。定义三个构造函数，各自的逻辑在各自的文件中编写。

虽然引入了三个文件，但是真正执行逻辑的地方是index.js中


页面也能正常显示，这样我们就通过面向对象改造了我们的代码，并使我们的代码更具维护性。Header出了问题就去Header文件中找，SideBar出了问题就是sidebar文件中找。

但是如果我们把代码拆成这个样子，又会带来新的问题。大家发现，在index.html中引入了多个js文件。
这样的就会带来几个问题

1. 整个页面的加载速度就会变慢：以前我们只需要加载一个js文件，现在我需要加载4个js文件，导致我的页面多出3个http请求，页面的速度当然会变慢
2. 从代码中看不出文件的位置关系：你打开index.js文件的时候，你会看见它执行创建的代码，但是你并不能直接从文件中看出这三个类对应的文件在哪里，你必须回头看index.html文件，才能发现文件的层级关系
3. 很难出发现文件的错误：假设content.js文件的位置放到了index.js的下面，浏览器控制台就会报错，点击错误发现在index.js中的new Content(); 发生了错误，但是对于一个小白来说，就可能不会发现是文件引入顺序导致的问题
   
   

所以当我们用以上面向对象的方式去编写代码的时候，项目变得不容易维护了。但为了解决这个问题，有人就想出了一种方式

我们还是在index.html引入一个index.js，但是如果你需要在index.js中要去用这个Header Sidebar 或者Content的话，自己去引这个js文件

如果代码这样去写是不是会解决我们之前的几个问题呢？

1. 首先：index.js中只引入了一个js文件，请求少，网页的运行速度自然快
2. 其次：文件和文件之间的依赖关系会非常明确，目录结构一目了然
3. 第三：引入顺序颠倒，不会导致运行报错问题，运行indexjs代码之前，已经引入了它依赖的几个模块

但是我们打开浏览器发现报错。学习vue和react的小伙伴会非常熟悉 import xxx from 'xxx’这种模块引入的方式，就是es module模块引入的方式.

如果我们想这样实现代码，目前来看是根本不可能的，这个时候webpack就登场了。虽然你浏览器不能识别我的语句，但是我webpack可以，webpack把import导入语句翻译成浏览器可以识别的代码
这个时候在我们的项目文件中安装一下webpack

npm init -y // 执行这个命令可以看见文件夹中多了一个package.json文件

npm install webpack webpack-cli --save-dev

// 可能有人好奇webpack和webpack-cli的关系是什么？我后面的笔记会讲

安装好了之后 我们终端中运行

npx webpack ./index.js // 这个命令的作用是用webpack翻译index.js

如果运行报以下错误

注意是不是你的路径出了问题： ./index.js，仍然报错，用下面命令执行

webpack ./index.js -o ./dist    // 将index.js文件打包到dist文件夹下

打包完成后，会发现在你的项目文件中找到dist文件夹，里面有一个main.js。这就是webpack帮你翻译好的文件，这个时候回到我们index.html文件，之前我们说我们引入的这个index.hs.js文件是根本没有办法运行的但是webpack帮我们翻译了一个dist文件夹下的main.js文件，这个文件应该是可以运行的。我们引入这个文件在浏览器打开html，发现报了另外一个错误

这是因为，如果你要用es module的方式引入模块的话，webpack其实是有要求的，它要求你这个模块必须使用es module模块导出的方式对模块进行一次导出，这样编译才可以正确的引入，怎么导出其实也是非常的简单，以header.js为例。使用es module的方式导出Header就可以了

那这个时候index.js中的代码就有问题，需要把var dom = document.getElementById(“root”); 这段剪切放到三个模块中


重新运行 npx webpack ./index.js 命令进行打包，这个时候浏览器的内容都出来了

写到这里，你可能认为webpack就一个代码的翻译器，实际上这样理解是不准确的，下一篇我们会继续深入学习webpack。