webpack概念

青旅半醒 2022-01-11 05:43 269阅读 0赞

随着前端工程越来越复杂，单独建几个文件写业务代码已经无法保证项目的可维护性，所以就把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块做自己的事情，这样就能保证项目的可维护性和可扩展性。但是假如有几千个模块，在页面能引入几千个JS文件么，所以当项目达到这种程度，我们就需要借助工具来管理我们的模块。  
webpack就是这种工具来帮助我们管理模块，与webpack相似，还有很多相似的工具，比如说gulp、GRUNT、browserify,但是这两年webpack的使用率直线上升，比如说vue、React、Angular三大框架的脚手架工具都开始使用webpack作为项目底层的构建，这得益于webpack会提供其他工具无法实现的一些特性，比如说：Tree shaking、懒加载、代码分割等等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
所以使用webpack做代码管理工具已经是越来越多的前端开发者的共识，学会webpack会更深层的去思考前端工程化上的内容，也能发现在代码的背后别有洞天，学习webpack将极大的扩充前端开发视野。  
webpack4相对于之前的版本约了比较大的变化，速度更快，大型项目节约90%构建时间，内置了更多的默认配置，变更了许多API。  
学习webpack的知识储备：nodejs、webpack基础  
收获：  
彻底学会webpack的配置，理解webpack的作用及原理、上手项目的打包过程配置、拥有工程化的前端思维、步入高级前端工程师行列。

## webpack究竟是什么？ ##

webpack究竟是什么，它的产生背景以及它所能解决的问题是什么？  
在最初我们写一个web网页的时候，是这样做的，创建一个index.html文件，写一个网页的最基础标签内容，在head中写一些样式，在script标签中写一些业务逻辑，或者引入外部的JS文件，在浏览器中打开就可以看到我们创建的网页了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 1]  
随着前端技术的发展，JS实现的代码内容越来越多，所以如果通过面向过程的方式写代码，代码就会变得非常长，所以面向对象编程就出现了，把页面的各个部分变成多个对象来写，所以创建多个文件，各文件定义构造函数，在构造函数中去做各部分的逻辑，将这些JS文件都在index.html中加载，然后在index.js文件中创建各文件的对象。  
![在这里插入图片描述][20190619155318312.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20190619155431904.png]  
通过面向对象改造了我们的代码，使代码更具有维护性。  
这样回造成新的问题，在index.html当中我们引入了太多的JS文件，这样回带来几个问题：  
1.整个页面的加载速度会变慢，以前只需要加载一个JS文件就好了，现在需要加载多个JS文件，页面会多出三个http请求，加载速度会变慢。  
2.在index.js文件中，会看到创建对象，但是并不能看到Header类对应的文件是哪一个，从代码当中看不出文件的位置的相互关系  
3.很难排错，例如在index.html中我们将content.js文件放在index.js后面，那将会找不到Content类，很难找出问题，代码变得不容易维护。  
针对以上问题，想出的解决办法，还是在index.html中只引入index.js，如果index.js想用各个类，在index.js文件中自己引入各个文件  
这样在index.html只引入了index.js文件，网页的运行速度会很快。第二点，文件和文件的依赖关系非常明确，目录结构一目了然。颠倒顺序也不会出现问题，因为在运行index.js文件之前再上面已经引入了依赖的几个模块或者类。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 3]  
这种模块的引入叫做ES Moudule模块引入方式（在vue、react中这种语法都能用），但是这种引入方式在这里会报错，为什么？  
![在这里插入图片描述][20190619162526406.png]  
其实在浏览器中不认识import这种语句，不能识别是在做什么，如果想这么去实现我们的代码是不可能的，这个时候webpack就登场了，虽然原生浏览器不知道import语句是什么意思，但是webpack知道import是要引入一个模块，可以帮浏览器做一个翻译，就可以正确运行代码了。  
安装webpack对代码进行翻译

## 如何安装webpack？ ##

1.进入项目文件目录运行 `npm init lesson` (前提是已经安装nodejs和npm包管理工具)  
初始化一个名字为lesson的包，回车按照默认的条件来创建一个npm包的配置文件，这个命令实际上在我们的项目目录下创建了一个package.json文件  
2. 执行`npm install webpack-cli --save--dev` 回车，正常来说当你安装webpack-cli的时候，会帮我们把webpack也安装了，也可以`npm install webpack --save` 安装webpack  
3. 现在已经在项目中安装好了webpack，安装webpack的目的是对代码进行翻译，在命令行中运行`npx webpack index.js`，意思是翻译index.js这个文件  
这个时候我们打开我们的项目文件，发现里面多了一个dist文件，在这个文件里面有个main.js文件，这就是webpack翻译好的文件  
4.打开我们的index.html文件，引入的是inde.js 文件，这个文件是不能运行的（因为有浏览器不能识别的语句），但是webpack帮我们翻译的dist/main.js是可以运行的，所以我们把index.html的引用改为dist/main.js运行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 4]  
在浏览器中打开，发现有报错：  
![在这里插入图片描述][20190619175004823.png]  
webpack翻译的是index.js文件，当它尝试去引入Header、SideBar、Content这三块的内容，但是如果用ES Moudule的形式引入，webpack是要求模块是使用ES Moudule的形式导出的，这样引用才会引入，如何导出呢？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 5]  
我们打开content.js，只需要用export default ES Moudule 的语法把构建类导出即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 6]  
重新运行`npx webpack index.js` 就可以运行了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20220111/a5680007ecf14d179a5b5f55d41add22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 1]: /images/20220111/f2f0f7d1695b482191590b35eb39b754.png
[20190619155318312.png]: /images/20220111/602220cf7fba438ba4c5b97e9acc3823.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 2]: /images/20220111/5e3a99f033fc4b999fba3106565e8dce.png
[20190619155431904.png]: /images/20220111/2d1e62c1a0ff4ffb982d2535c9cbbf17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 3]: /images/20220111/a1eaeac20f634d1983b19e9bcda4df98.png
[20190619162526406.png]: /images/20220111/74d4026d84c0452d82c05a8a68e68a76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 4]: /images/20220111/c1745386f1224412a10483f363f2b20b.png
[20190619175004823.png]: /images/20220111/2cf6b4859a394710b5d0c4d086b4377a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 5]: /images/20220111/e86eb96b3d79445ba75e25a631b13d13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 6]: /images/20220111/906d8d4c62c1422d9a0a525b16b9320a.png