如何根据项目安装webpack？全安装过程以及遇到的坑坑坑坑以及解决方法！

最近开始学习webpack了，然而在安装的时候就遇到了很多大坑（落泪），在网上看了很多都是说全局安装，官网上是不建议全局安装的，所以我也是根据项目进行安装。
现在webpack已经出4版本了，看了网上很多安装教程，感觉都没有很全面的，所以我就整理了一下~以下就是我遇到的一些问题以及解决方法。

安装步骤：
在安装webpack前要先安装node.js，直接去官网下载然后安装就ok啦。可以先打开运行对话框输入node -v以及npm -v查看是否安装成功，如果出现版本号则安装成功。

问题一：根据项目进行安装的时候，在项目文件上按shift+鼠标右键，竟然没有“在此处打开命令窗口”这个选项。（第一步我就遇到了瓶颈）
**解决：**这个问题主要是电脑系统的权限问题，首先输入指令打开电脑的注册列表，系统自动定位到计算机\HKEY_CLASSES_ROOT\Directory\Background\shell\cmd这个位置。


这里我主要的问题是ShowBasedOnVelocityId一开始是为HideBasedOnVelocityId，也就是这个标识被隐藏起来了，所以要将它给成显示出来的。但是这里我又改不了，你会发现是删除不了也输入不了的，这里也是权限的问题。

这时候就要在左边的注册表文件授权一下，在\HKEY_CLASSES_ROOT\Directory\Background\shell\cmd右键->权限->Users 的权限要完全控制。如果不行，就点击高级->选自己为所有者，按确定。

这时候就可以更改了，把HideBasedOnVelocityId改为ShowBasedOnVelocityId，然后再去项目文件上shift+右键，就会发现“在此处打开命令窗口”这个选项出现了。


终于解决了问题一（感动落泪），然后就可以开始安装webpack，在安装前先新建几个文件夹目录。dist用来放置打包完的文件，node_modules是安装node.js的时候会自动生成的。

在安装webpack要先初始化，按ctrl+shift+y打开终端，输入npm init一直按确定键就可以了，初始化完成后会出现一个package.json的文件。

接下来就可以安装webpack了，在终端输入npm install webpack --save-dev这个命令。

这样其实就是安装好webpack了，然后可以输入webpack -v查看一下webpack的版本，然而。。。
问题二：无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

（落泪了。。）
这其实是因为不是全局安装，所以查看不到webpack所在的位置，所以只要找到webpack的位置，输入路径就可以了。这时候查看node_modules/.bin/下会发现有个webpack，所以输入node_modules/.bin/webpack -v就可以成功查看webpack的版本了。（太不容易了）

然后可以将创建的main.js打包到一个文件目录下，输入命令node_modules/.bin/webpack ./src/main.js -o ./dist/bundle.js，也就是 要打包的文件地址 -o 要将文件打包到的地址。

这时候会发现dist下面出现了一个bundle.js这个文件。

这时候还有黄色警告（落泪），其实是因为我用的是webpack4版本，将命令改为node_modules/.bin/webpack ./src/main.js -o ./dist/bundle.js --mode development，就是在后面加上–mode development就可以了。

这个使用了判断是开发环境还是生产环境的。（开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境）这个可以自己去查看一下详细资料哈~
这时候就没有黄色警告了嘿嘿~

这个过程中我还遇到了一个问题。
问题三：无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。
解决：
1.以管理员身份运行vs code
2.执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
3.执行：set-ExecutionPolicy RemoteSigned
4.这时再执行get-ExecutionPolicy，就显示RemoteSigned
（亲测有效~）

不过每次打包都要输入一次命令是不是很麻烦，所以现在很少每次都输入一次命令啦，于是就有了比较方便的办法了。
在文件夹目录下新建一个webpack.config.js文件，这个是一个配置对象，然后在里面写入打包进的目录以及输出的目录地址。

然后我们就可以在终端上面输入node_modules/.bin/webpack进行打包啦~至此终于算是成功安装以及实现打包了。
分享一下webpack.config.js配置对象的打包原理。

先分享到这里啦~大家有什么问题也可以一起分享一下，继续努力！下次再给大家分享！