2、webpack的安装方式

小鱼儿亮亮
1,415 阅读3分钟

一、安装nodejs

  1. 要使用webpack，首页要安装nodejs，因为webpack是基于node开发的。

  2. 如何查看node、npm是否安装成功。

node -v
v14.7.0

npm -v
6.14.7

如果如上能显示版本号说明安装成功。


二、用npm init初始化项目

  1. npm是node的包管理工具，npm init主要是为了生成一个node的包文件，使项目符合node的规范。

  2. npm init主要在项目中生成一个package.json文件。

  3. package.json文件中设置private:true 表示这个项目是一个私有的项目，不会被发布到npm线上仓库上

执行npm init时会提示一些确认信息，可一路回车。内容如下：

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (learnwebpack)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\web\learnWebpack\package.json:

{
  "name": "learnwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

完成后会生成一个package.json文件，内容如下：

{
  "name": "learnwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

也可直接使用命令 npm init -y 省去了敲回车的步骤，生成的默认的package.json


三、安装webpack

webpack安装有两种方式：全局安装和项目内安装。 不建议全局安装webpack，以防不同项目webpack版本不同导致不能灵活使用webpack

3.1、 全局安装

npm install webpack webpack-cli -g

查看是否安装成功

webpack -v

全局安装有个缺陷，如果电脑上有2个项目，使用的是不同版本的webpack进行打包的，全局安装就不能同时满足2个项目的需求。

3.2、 局部安装(项目内安装)

局部安装需要先进入项目，然后使用如如命令安装。

npm install webpack webpack-cli --save-dev
或
npm install webpack webpack-cli -D

此时查看是否安装成功，不能使用webpack -v ,而要使用npx webpack -v。

webpack和webpack-cli安装完成后目录中会多一个node_modules文件夹，并且package.json的内容更新如下：

{
  "name": "learnwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0"
  }
}

四、技巧总结

4.1、 npx的说明和使用

  1. npx是npm的附属工具，npm 从5.2版开始，增加了 npx 命令。

  2. webpack -v 默认是查看全局的webpack版本，npx webpack -v 则是从当前目录查看版本号。

  3. npx的另一个功能：下载命令行，执行完成后移除,节约硬盘空间。

如下：不需要在本地安装create-react-app即可使用create-react-app命令创建项目。

npx create-react-app my-app

4.2、 查看npm包信息的命令——npm info [npm包名]。如下

查看webpack的所有历史版本

npm info webpack

4.3、 安装npm包的指定版本

指定版本的npm包格式：包名@版本号。如下

npm install webpack@4.44.2

4.4、 快速使用npm init初始化node项目

直接使用npm init命令初妈化项目时，会让你确认一些项目的基本信息（一般一路回车直接使用默认的就可以了）。

使用命令npm init -y可以跳过确认过程，直接生成默认的。

avatar
文章
阅读
粉丝