webpack从0到手写webpack_03

本文介绍了Webpack环境的搭建。Webpack基于Node开发,需先安装Node.js,建议选LTS稳定版本。项目初始化后,介绍了Webpack的两种安装方式,不推荐全局安装,推荐项目内安装,还举例说明了不同安装方式的优缺点及如何查看版本号。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpack从0到1——03

搭建webpack环境

webpack是基于node开发的模块打包工具,本质上是由node实现的,我们首先就要按照nodejs环境,最好是安装最新版本的nodejs,因为阅读webpack文档,打包速度有两个非常重要的点,一个是要保持nodejs版本非常的新,另一个就是webpack版本非常的新,webpack会利用nodejs中的一些新的特性来提高给它的打包速度,webpack作者也提到了,在某些复杂的情况下,使用新版本的webpack(4)打包比旧版本(3)的打包效率提高90%以上

在这里插入图片描述
node安装左侧LTS版本,这是稳定版本。右侧Current未最新版本,里面含有许多尝试性的API,可能会由很多小bug,因此我们为了稳定同事比较新,我们选择左侧的进行下载安装。
网上由很多nodejs环境的搭配教程,我这里就不详细说明了

在cmd命令行运行以下命令,出现版本号,就证明安装好了
在这里插入图片描述

我们创建一个新的项目demo03,然后在终端中运行

npm inti -y

生成了一个package文件,里面描述了node包里面的一些信息。我们可以在里面增加一些内容,private:true,代表我们的项目是一个私有的项目,他不会被发布到npm的线上仓库里面去,我们可以把main去掉,因为我们这个项目不会被外界引用,只是自己来用没有必要向外面暴露一个js文件,script中的东西,目前也可以去掉
这样的话我们package.json就配置好了
在这里插入图片描述
项目初始化之后我们就开始安装webpack

webpack安装有两种方式
第一种是全局安装的方式

npm install webpack webpack-cli -g 

但是这种全局安装webpack的方式,我非常不推荐大家使用,全局安装webpack有什么
问题呢?举个例子,假设我有两个项目,都用webpack打包,webpack的版本号是固定的,但假设我的一个项目是 通过webpack3进行配置的,另外一个项目是webpack4或者webpack5。如果你全局安装的是4和5,那么webpack为3的项目是运行不起来的。你只能删除webpack4重新安装webpack3,在配置运行项目

第二种用法就是在项目内安装webpack。首先全局卸载webpack

npm uninstall webpack webpack-cli -g

项目内安装webpack

npm install webpack webpack-cli --save-dev

此时你运行

webpack -v

在这里插入图片描述

发现找不到webpack这个命令,因为我们是安装在项目内,并不是安装在全局,但是node提供了一个命令叫做npx,我们通过npx 来运行webpack

npx webpack -v

此时打印出webpack 和 webpack-cli的版本号
在这里插入图片描述

这种项目内安装webpack的好处是什么,再给大家举个例子。我们在桌面上再去创建一个项目demo04。这个项目我希望用的是 webpack4.x的版本,
首先初始化包,去掉main 和script的内容,添加 “private”:true

npm init -y

在这里插入图片描述

通过下面命令查看webpack版本下

npm info webpack

在这里插入图片描述
我们选择webpack4 4.44.4这个版本进行下载安装

cnpm install webpack@4.44.2 webpack-cli -D

此时运行 npx webpack -v 命令我们可以看见项目内webpack的版本号为4.44.2
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值