全面掌握Webpack4.0 (一)Webpack究竟是什么（1）（持续更新...

本文链接：https://blog.csdn.net/weixin_40285008/article/details/110130501

前言

作为一名前端开发Engineer，对于webpack无非是有以下几种认知程度：

从未接触过webpack，只是听身边的人谈到过webpack或是在浏览网站时见到过webpack这个字眼
项目中使用了webpack，但都是脚手架（例如vue-cli）自动配置好的，并没有手动去配置过
项目中使用了webpack并手动去配置过一些基础的配置项，但对于webpack并没有一个体系化的学习和掌握程度
掌握了webpack的常用配置项并且可以手动查找webpack的官网API去独立解决项目中的非常规问题
精通webpack的使用方法并掌握其实现的原理（此类大神可以跳过本系列文章）

如果你对webpack介于以上的认知程度那么我强烈建议你读完本系列文章，该系列文章我会从最基本的讲起，告诉你到底什么是webpack，为什么要用webpack，怎么用webpack，如何用好webpack，带你体系化的学习webpack，了解什么是前端工程化以及前端工程化的意义，全文干货易懂，你只需要有（html+css+js）的基础就可以读懂本文了，废话不多说，Let`s go

第一章.Webpack究竟是什么（1）

在说webpack究竟是什么之前，给大家举个例子：
我有这样一个需求，我想使用js通过面向对象的方式在页面中创建三个节点，分别是header、content和footer，这个应该很简单吧，先来看一下这个demo的工程目录结构，项目名是我自定义的，就叫webpack了：
在这里插入图片描述

这个目录结构很简单
index.html：页面主文件
header.js:用于创建header节点对象
content.js:用于创建content节点对象
footer.js:用于创建footer节点对象
index.js:用于实例化header、content、footer节点对象
如图所示将这4个js文件引入到index.html中
在这里插入图片描述

每个js文件中的代码如下所示：
header.js
在这里插入图片描述

content.js
在这里插入图片描述

footer.js
在这里插入图片描述

index.js
在这里插入图片描述

index.html文件如下:
在这里插入图片描述
所有的代码都写完了，此时页面中的效果应该是这样的：

你会在页面中看到Header、Content、Footer这个三个通过js创建的元素。到此为止，我们的小需求就已经实现完了。需求虽然是实现了，但是到这里大家有没有发现一些问题？
1.index.html中引入了多个js文件，实际开发中可能会有成百上千个js文件，每一个js文件都是一个http请求，可想而知页面的加载速度一定会变得很慢
2.我们回过头去看index.js文件中的代码，我们在这里通过new的方式创建了header、content以及footer的实例，但是我们在这里根本看不出来new Header()、new Content()或者是new Footer()对应的代码文件在什么地方，这样维护起来就很不友好
3.index.html中一旦引入的js的顺序出现问题，那么程序就会报错，比如说你先引得index.js后引得header.js，那么一定会报以下的错误
在这里插入图片描述
报错原因我想大家都知道，我就不多说了，如果js文件很多的话，一旦引入js的文件的顺序错了导致程序报错，那么我们是很难排查错误出现在哪里的。

针对以上的问题点，我们试着按照以下的方式优化一下：
我们将index.html中引入的header.js、content.js、footer.js这三个js文件移到index.js中，index.html文件中只留一个index.js文件，改造后的代码如下所示:
index.html:
在这里插入图片描述
index.js:

给header.js、content.js、footer.js分别添加导出语句exports default将其公开以便于import导入
（如果没用过ES6的同学可能对这里比较陌生，这里如果不理解也没关系，你就记住“想用import导入，你得先用exports default导出”，继续往下看就可以了）
在这里插入图片描述
（这里是导出了Header,Content和Footer同理，就不贴代码了）

在重新打开index.html页面查看效果之前，我们看一下现在的代码结构是不是解决了上面提到过的那几点问题：
1.现在的index.html只引入了一个index.js，解决了引入过多js导致的页面加载速度变慢的问题
2.通过import的方式引入js文件，不必担心上面第3点提到的js文件引入顺序错乱的问题，同时from后面就是每个构造函数对应的文件路径，也解决了上面提到的第二点的维护不友好的问题
通过这种方式改造代码之后，显然解决了上面提到的三点问题，接下来我们来运行index.html看一下能否正常运行。
运行index.html如下，页面上什么都没有显示，同时控制台报错了：
在这里插入图片描述
程序会报错可能是大家意料之中的问题，是的，正如你所想的那样，浏览器是不认识‘import ’这种语法的。那么我们想使用import这种方式引入js文件但浏览器却不识别import ，我们该怎么办呢？是的，这个时候webpack闪耀登场，webpack将会承担一次“翻译官”的职责，将‘import’翻译成浏览器能够识别的代码。那么如何使用webpack翻译index.js文件呢？我们继续往下讲（下面的部分先跟着我过一遍就可以了，如何安装和使用webpack我会在后面的章节详细去讲）

1.初始化一个package.json文件，在项目目录下执行以下命令（一直回车即可）：（在此之前确保成功安装了node和npm）
在这里插入图片描述
此时项目目录会多出一个package.json文件
2.安装webpack-cli

此时项目目录会多出一个package-lock.json文件和一个node_modules文件夹
3.安装webpack

在这里我要补充说明一下当你安装webpack时报错的原因以及解决方案：
原因：在初始化项目package.json的时候执行npm init 一路回车的话系统默认把名字设置为了webpack
这导致和安装webpack包的的名字一样，所以报错
解决办法：修改package.json文件中的name属性值为非‘webpack‘即可
在这里插入图片描述
4.让webpack对我们的index.js进行‘翻译‘，在控制台执行以下命令：

此时webpack就将index.js这个文件‘翻译’成了浏览器可以识别的js代码，此时会发现我们的项目目录中多出了一个dist文件夹，dist文件夹下有一个main.js文件，这个main.js就是’翻译’后的文件
在这里插入图片描述
那么此时我们的index.html中就不再引入index.js了,而是要用main.js替换掉index.js

此时我们重新打开index.html，发现header/content/footer这三个元素成功的显示在了页面上。