webpack初入门

一、webpack是用来做什么的？

常见的前端打包工具有

• gulp4.x
• webpack 4.x
• rollup
• parcel
• FIS3

webpack将所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。

举例： 我们又两个模块，A模块引用B模块，我们现在使用webpack打包A模块，webpack会自动寻找A和B之间的关系，进而打包B模块

什么时候用webpack?

	如果你正在用许多非代码的静态资源（比如CSS，图像，字体等）构建一个复杂的
	前端应用程序，那么Webpack会给你带来很大的好处。如果你的应用程序非常小，
	并且你没有什么的静态资源，并且你只需要一个JS文件就足够客户端需求，那么
	Webpack就没有必要使用。

webpack的好处：

• 清晰简明的模块。一个稍微有点规模的应用往往有着一个复杂的资源关系网，在需要做优化的时候就会使一件非常的头疼的事情。webpack可以代替你做这个麻烦事，将复杂的多个文件打包成你希望的代码模块，引入会非常清晰，想对引入文件做点什么操作也会更容易。

• 代码拆分来做资源异步加载。webpack打包成一个模块之后也带来一个问题，如果加载模块过于庞大，加载的速度就没法保证，所以webpack也提供了拆分代码后异步加载的方式，即先加载某个主要模块，当用到某个需要资源异步加载的模块时在对其发送请求加载，这样做在大型项目中很常见。

• 消除对未引用资源的依赖。在复杂应用又多静态资源的情况下会减少很多无效的浪费，这会对应用的有很大提升。可以控制资源的处理方式。通过loader或者插件，我们可以对不同类型的文件引入做我们希望的操作。比如对代码压缩，uglify，图片压缩，文件处理，css预处理等等。

• 稳定的生产部署。开发环境到生产环境的自定义配置到打包方式，通过同一套流程稳定的导出，这些都会给项目带来很大的效率提升，这对于一个大型项目来说，是至关重要的。一系列开发辅助工具。Dev-Server，HMR，这些都不用再一点点去配置，即开即用，大大提升了开发效率。

    作者：lqs469
    链接：https://www.zhihu.com/question/68085940/answer/259605496
    来源：知乎
  

二、开始webpack的安装

1、首先要知道装webpack需要的环境

环境支持：Node.js 官网下载即可
1.默认安装
2.检测是否安装成功
在gitbase中 输入 node -v npm -v 看是否有内容出现

证明安装成功！

接着输入：

npm i yarn -g    （我也不知道这句话起什么作用）

二、安装淘宝镜像

淘宝镜像这个cnpm到底是什么（来个人告诉我）

步骤：
在淘宝镜像网站中找到这个↓

然后右上角复制这句代码

然后等它安装完

局部安装（在文件中安装的意思吧）

然后在vscode中的文件夹中打开终端，输入局部安装的代码

$ cnpm webpack webpack-cli -D

然后出现了错误：
bash: cnpm: command not found (这里忘记截图了)

接下来是找到一些的尝试解决方案：

因为中途没有关掉vscode重启，而是直接来所以没能判断是不是最后一个办法才是解决了的

第一种方法：
在确认装好的情况下，配置环境变量，找到cnpm的文件位置

然后在环境变量中新增一个
这个方法之后尝试依旧出现错误提示，【这里我没有重启vscode】，可以试试重启

参考：这位大佬的博客和这个大佬的

第二种方法：
大概意思是npm的安装成功需要在cmd中来检测，不能是在git bash上来确认，确认是安装成功后再配置环境变量
参考这位大佬的

第三种方法是：
大概意思是卸载之后重新来搞，这里的话我只用到了卸载再重新安装，没有再看下去，因为超出了我的知识存储范围

参考这位大佬的

第四种方法是：
大概意思也是配置环境变量后，然后在vscode的兼容性中设置下
然后重启了vscode后就成功啦！！
参考这位大佬的

成功啦！！出现了node文件

然后写到这里的时候上次关闭睡觉了，再打开接着写时

新建一个文件夹，下有个index.js,随便写点什么东西，然后输入打包

$webpack 回车

出现了错误：（忘记截图了）

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

然后重新删除，再来一次局部安装和打包后，显示成功

文件夹中出现了dist文件，文件中出现main.js文件

接下来的操作再另外一记录

添加的理解：
cnpm就是一个包管理器，我们用它将jquery下载了node_modules中，类似手机的应用商店，可以下载软件