webpack的使用教程(1)

最新推荐文章于 2024-03-11 15:00:08 发布

Java全栈研发大联盟

最新推荐文章于 2024-03-11 15:00:08 发布

阅读量780

点赞数 1

分类专栏： vue 文章标签： webpack的使用教程(1)

本文链接：https://blog.csdn.net/qq_40241957/article/details/98937761

版权

vue 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

webpack的使用教程(1)

一、先安装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

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

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

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

第一步安装nrm

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

可以看到上面有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的命令

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文件进行编译，之后我们使用编译之后的结果即可）

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

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

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

然后在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的语法，浏览器比较低级，解析不了

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

然后我们把index.html里的

<script src="main.js"></script>

修改成

<script src="../dist/bundle.js"></script>

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

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

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

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

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

代码如下：

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' //这是指定 输出的文件的名称
	}
}