webpack的使用教程(1)

以你之姓@ 2021-11-05 17:58 366阅读 0赞

# webpack的使用教程(1) #

## 一、先安装Node.js包 ##

**第一步:** 先去 [Node.js官网][Node.js]下载安装Node.js,傻瓜式安装，一路next

虽然我们把Node.js安装在D盘了，但是除了这个目录，其实在C盘的另外一个目录下，还有一个附带生成的目录【C:\\Users\\用户名\\AppData\\Roaming\\npm】，这个目录是用来存放你通过npm全局安装的包。比如，如果你通过“npm i nrm -g”全局下载nrm这个工具，那么下载的文件就会被保存到“【C:\\Users\\用户名\\AppData\\Roaming\\npm】”这个目录下。

既然Node.js的安装目录都不想放到C盘，那么通过npm下载的包更不想放在C盘。我希望统一管理，把npm全局下载的包都保存到nodejs的根目录下，也就是“D:\\nodejs”这个路径下。所以我们就必须做一些响应的设置了。接下来第二步就是解决这个问题的。

**第二步：** 修改默认的全局目录

有以下两种方案可以选择：

**方法一:** 到node安装目录\[D:/nodejs\]执行以下命令：

**前提条件:** 在node安装目录创建`/nodejs/node_global`、`/nodejs/node_cache`两个文件夹存放全局包

npm config set prefix D:/nodejs/node_global/ //全局包目录，就在node安装目录新建了个nodejs文件夹存放
    npm config set cache D:/nodejs/node_cache/  //全局包缓存目录，就在node安装目录新建了个nodejs文件夹存放

**方法二：** 直接修改`C:/Users/[username]/.npmrc`文件的`cache`值和`prefix`值，文件如下：

prefix=D:\node\nodejs\node_global
    cache=D:\node\nodejs\node_cache
    registry=https://registry.npm.taobao.org/

**第三步：** 配置环境变量

计算机->属性->高级系统配置->环境变量->用户变量->编辑`path`,添加\`global“目录如下

PATH: D:\node\nodejs\node_global\;

OK，到这里已经设置好了，你可以开心的使用nodejs，以及它附带的npm工具了

## 二、在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中 ##

npm install webpack -g

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE3MTUucG5n][]

接下来我们要通过npm命令安装nrm了 :

下面运行npm i nrm -g时可能会由于网速问题导致安装报错，可以把命令换成

npm install -g nrm --registry=https://registry.npm.taobao.org

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE3NDMucG5n][]

第一步安装nrm

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4MDUucG5n][]

第二步：运行nrm ls 查看nrm给我们提供的镜像有哪些

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4MjEucG5n][]

可以看到上面有6个镜像，其中cnpm和taobao是咱们国内的，所以下载速度会快很多，所以我们不从国外的原版

npm ---- https://registry.npmjs.org/

路径上下载。使用nrm use taobao或者nrm use cnpm 命令进行切换即可！

**注意：** nrm只是单纯的提供了几个常用的下载包的URL地址，并能够让我们在这几个地址之间很方便地进行切换，但是我们每次装包的时候，使用的装包工具都是npm(**解释：** 就是说我们每次下载东西的时候，还是使用的npm命令，但是该命令会从nrm指定的地址去下载而已)

## 三、安装webpack ##

webpack安装的两种方式：

1.运行npm i webpack -g 全局安装webpack，这样就能在全局使用webpack的命令

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4NDYucG5n][]

2.在项目根目录中运行npm i webpack --save-dev 安装到项目依赖中

全局安装webpack-cli,相当于是webpack的客户端，一定要确保webpack-cli和webpack版本之间能够互相兼容

//因为上面的webpack是全局安装的,因此这里我们安装weback-cli也是需要全局安装的!
    npm install --save-dev webpack-cli -g

## 四、webpack的使用 ##

我们安装完了webpack之后，就要使用webpack了 :webpack的作用就是“能够处理JS的兼容问题，把高级的、浏览器不能识别的语法转为低级的，浏览器能够正常识别的语法

举例：我们在hubuilder里面新建一个项目，项目的结构如下： 其中dist目录是用来存放某些文件被webpack编译解析之后的结果（举例：因为有一些ES6语法写的js文件，可能浏览器解析不了，所以需要使用webpack对该js文件进行编译，之后我们使用编译之后的结果即可）

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5MTYucG5n][]

我们进入到项目所在位置执行cmd命令，然后执行npm init -y, 之后会发现项目下多出来一个package.json文件

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5MzAucG5n][]

假设我们需要在项目的index.html里面用到jQuery包，那该怎么办呢？我们只需要通过npm工具安装jQuery即可

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5NDQucG5n][]

命令执行完之后再刷新项目，会发现多出来了两个文件

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5NTYucG5n][]

然后在main.js里写如下代码

//这个main.js是我们项目的JS入口文件
    
    //导入jQuery
    //import *** from *** 是ES6中导入模块的方式
    import $ from 'jquery'  //这句话的意思是说“从项目中node_modules（如上图所标）中导入jQuery包，然后让“$”来接收
    $(function(){ 
    	$('li:odd').css('backgroundColor','lightblue')
    	$('li:even').css('backgroundColor','red')
    })

在index.html中写代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="main.js"></script>
    	</head>
    	<body>
    		<ul>
    			<li>这是第1个li</li>
    			<li>这是第2个li</li>
    			<li>这是第3个li</li>
    			<li>这是第4个li</li>
    			<li>这是第5个li</li>
    			<li>这是第6个li</li>
    			<li>这是第7个li</li>
    			<li>这是第8个li</li>
    			<li>这是第9个li</li>
    			<li>这是第10个li</li>
    		</ul>		
    	</body>
    </html>

最后运行在浏览器端运行index.html时，报语法错误如下，说明浏览器不能解析该main.js，原因是因为main.js中的代码涉及到了ES6的语法，浏览器比较低级，解析不了

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIwNTQucG5n][]

为了解决这个问题，我们使用webpack这个前端构建工具把main.js做一下处理，生成一个bundle.js文件，然后我们使用这个bundle.js文件即可

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxMDgucG5n][]

然后我们把index.html里的

修改成

之后再运行就可以出真正的结果了，index.html运行结果截图如下：

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxMzIucG5n][]

但是如果我们修改了main.js里面的内容，岂不是又要写一遍

webpack ./src/main.js  ./dist/bundle.js

每次都要在webpack后写源文件路径，编译后的路径，这样太麻烦了，所以我们需要对此进行配置（写进配置文件里面）

首先我们需要在项目的根目录下创建一个webpack.config.js文件

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxNTgucG5n][]

代码如下：

const path=require('path')
    //这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
    module.exports={ 
    	//在配置文件中需要手动指定入口和出口
    	entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
    	output:{ 
    		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
    		filename:'bundle.js' //这是指定 输出的文件的名称
    	}
    }

这样就OK了，每当我们需要修改main.js后，只需要在项目路径下cmd进入控制台，然后使用webpack命令就可以完成编译打包输出了，不需要在webpack后面写 源文件路径 和输出结果路径了

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyMTYucG5n][]

举例，我们把main.js中的”red改成”blue“,然后在项目路径下，使用webpack命令，再去访问index.html时效果如下面第2张图

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyMzUucG5n][]

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyNTAucG5n][]

\*\*webpack的总结：\*\*当我们在控制台直接输入webpack命令执行的时候，webpack做了以下几步：

1.首先，webpack发现，我们并没有通过命令的形式给他指定入口和出口

2.webpack就会去项目的根目录中去查找一个叫做 “webpack.config.js”的配置文件

3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象

4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建

\*\*扩展技能：\*\*我们知道package.json里面的devDependencies下都是本项目所使用的依赖信息，而node\_modules文件下是存放本项目下载的所有包（就是根据依赖信息来下载的）

![aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIzMDcucG5n][]

一旦node\_modules文件下的包出现残缺或者丢失，可以把项目的node\_modules文件删除，然后再在项目的根路径下使用cmd进入控制台然后输入npm i 命令重新根据依赖下载包即可

[Node.js]: https://nodejs.org/en/
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE3MTUucG5n]: /images/20211104/b778e612292542f590ea66d1c356f173.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE3NDMucG5n]: /images/20211104/a1b7eef17fc64252bffc7bca626c76fb.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4MDUucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4MDUucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4MjEucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4MjEucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4NDYucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE4NDYucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5MTYucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5MTYucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5MzAucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5MzAucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5NDQucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5NDQucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5NTYucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTE5NTYucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIwNTQucG5n]: /images/20211104/8d32bf482ba74951a0b9fa60a0cc13dd.png
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxMDgucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxMDgucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxMzIucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxMzIucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxNTgucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIxNTgucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyMTYucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyMTYucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyMzUucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyMzUucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyNTAucG5n]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIyNTAucG5n
[aHR0cHM6Ly9qYXZhYWxsaWFuY2Uub3NzLWNuLXNoZW56aGVuLmFsaXl1bmNzLmNvbS9pbWcvMjAxOTA1MDQyMTIzMDcucG5n]: /images/20211104/578c166348f943539dceaf7a441b8d6a.png