关于程序员:Webpack开发环境要如何搭建

1次阅读

共计 3759 个字符，预计需要花费 10 分钟才能阅读完成。

本文首发自「慕课网」，想理解更多 IT 干货内容，程序员圈内热闻，欢送关注！

作者 | 慕课网精英讲师三水清

本文将包含装置 Node、NPM、WebPack 开发环境，我应用的开发 IDE 是 VScode。因为 Webpack 理论是用 Node.js 写的，所以首先来介绍下 Node.js 的装置。

装置 Node.js
首先进入 Node.js 的官网，抉择对应零碎的下载包进行下载安装，对于 windows 用户，间接下载安装包装置即可，如果是 Macos 用户，举荐应用 brew 进行装置。接下来别离介绍下 Node.js 的版本治理和包管理工具。

Node.js 版本治理
Node.js 版本泛滥，包含稳定版和开发版，可能不同的我的项目须要的 Node.js 版本不同，这里我举荐大家装置 8.9 以上版本，对于曾经装置了 Node.js 的敌人，能够应用 nvm（windows 版本）对 Node.js 进行进行版本治理，（另外阿里有个 tnvm，也是治理 Node.js 版本的，减少了 alinode 版本系列的 Node.js）。

Node.js 包管理工具
Node.js 之所以这么风行，离不开宏大的社区建设，这里第一功绩就是 NPM 团队的奉献，应用 Node.js 写的代码，能够打包公布到 JavaScript 包治理平台 npmjs.com（这个寄存包的中央个别也被称为仓库）上，当咱们我的项目须要应用某个包（模块）时，能够间接应用包管理工具来装置（下载）对应的包，咱们也能够收费注册一个账号，公布本人的公共包和公有包供其他人应用。

NPM 是围绕着语义版本控制（semver）思维而设计的，咱们在软件版本中碰见的：rc、1.x.x、alpha、beta 等名词都能够在 semver.org 失去解释介绍，简略来说标准是主版本号. 次版本号. 订正号（MAJOR.MINOR.PATCH）：

1. 主版本号：当你做了不兼容的 API 批改；
2. 次版本号：当你做了向下兼容的功能性新增；
3. 订正号：当你做了向下兼容的问题修改；

NPM 中应用了一个命名为 package.json 的文件作为一个 NPM 包的形容文件，package.json 蕴含了包的根本信息（名称、版本号、形容、作者等）和依赖关系，例如：

{

"name": "demo",
"version": "1.0.0",
"dependencies": {"webpack": "^4.29.6"}

}
除了 version 合乎 semver 标准以外，再来看下其余两项：

name：下面的代码就是表明了这个我的项目为 demo，这样如果咱们未来公布到 npmjs.com 会以这个来命名，除了这种形式的名称，还有一种命名的形式是 @scope/name 的形式，是作用域包，例如咱们用来转化 ES6 语法的 @babel/core 就是 @babel 的作用域，具体介绍能够查看 package.json 的文档
dependencies：是 demo 这个我的项目的依赖，就是 demo 这个包内来到 webpack 这个包就不能应用了，对应的还有 devdependencies，开发以来，个别须要二次开发 demo 的时候须要装置的包，理论我的项目中，webpack 是构建工具，代码不会间接用 webpack 的 API，而只在开发和打包的时候采纳，所以正确做法是放在 devdependencies 中。
留神到 dependencies 中 webpack 的前面版本号后面加了 ^，意思是主版本是 4 的最新版本，每次执行装置命令的时候，会更新合乎这个规定的最新包，能够在 npm semver range 局部看到更具体的介绍。

NPM 的常用命令
上面介绍下 NPM 的常用命令：装置、删除、初始化、配置。

装置和删除
装置某个 NPM 包，应用命令 npm install packageName，简写 npm i packageName，如果执行命令的目录下有 package.json 则能够间接用 npm install 装置 package.json 中的所有依赖。如果咱们要装置某个版本的包，则能够应用命令 npm i packageName@x.x.x 格局。

如果咱们装置依赖包并且将这个依赖写入 package.json 则能够应用命令 npm i packageName –save（简写 npm i packageName -S），如果心愿写到 package.json 开发依赖中（devdependencies）则应用命令 npm i packageName –save-dev（简写 npm i packageName -D）

删除某个 NPM 包，则应用 npm uninstall 包名。

本地模式和全局模式
npm 的包装置，分为本地模式和全局模式，默认是本地模式，即在执行 npm install 命令的当前目录创立 node_modules，而后下载安装包及其依赖到 node_modules 目录。全局模式是指装置到全局门路的形式。在 Node.js 的 require 依赖之时，会优先查找本人以后文件的 node_modules，如果没有，则循环遍历下层的 node_modules，如果便历到根目录还找不到，则会应用全局模式装置的模块，另外全局模式装置的包能够指定全局命令，只须要在 package.json 减少 bin 字段并且指向包内对应的文件即可。全局装置一个包，应用命令 npm install –global，–global 能够简写为 -g。

初始化一个 NPM 我的项目
npm init 用来初始化生成一个新的 package.json 文件。输出 npm init 并且依据对应的提醒答复问题，会向用户发问一系列问题，如果你感觉不必批改默认配置，一路回车就能够了。
如果应用了 -f（代表 force）、-y（代表 yes），则跳过发问阶段，间接生成一个新的 package.json 文件。

设置 NPM 镜像
因为 NPM 网站常常不稳固，所以国内有很多镜像能够应用，淘宝 NPM 镜像是国内最大的一家 NPM 镜像网站，还有 cnpm 包能够替换官网 NPM 来应用，应用 cnpm 间接应用淘宝镜像装置 NPM 包。

单次应用镜像办法：

npm [命令] –registry=https://registry.npm.taobao.org
设置默认 npm 应用淘宝镜像办法：

npm config set registry https://registry.npm.taobao.org
应用上面的命令能够装置 cnpm 包，之后间接像应用 npm 一样应用 cnpm 即可，不须要增加 register

npm install -g cnpm –registry=https://registry.npm.taobao.org
NPM 其余常用命令
npm set：设置环境变量，例如：npm set init-author-name ‘Your name’，初始化的时候会应用默认环境变量；
npm info：查看某个包的信息，例如：npm info lodash；
npm search：查找 npm 仓库，前面能够跟字符串或者正则表达式，例如：npm search webpack；
npm list：树形的展示以后我的项目装置的所有模块，以及对应的依赖，例如：npm list –global 查看全局装置的模块。
NPM Scripts
NPM 不仅能够用于模块治理，还能够用于执行脚本。package.json 文件中能够增加 scripts 字段，用于指定脚本命令，供 NPM 间接调用。例如：

// package.json
{

"scripts": {
    "build": "webpack",
    "start": "node src/scripts/dev.js"
}

}
在 package.json 增加下面字段之后，能够间接应用 npm run build 和 npm run start 命令了，实际上：

npm run build：相当于执行了以后我的项目中目录下的 webpack 命令；
npm run start：相当于执行了 node src/scripts/dev.js。
另外 npm run start 还能够简写成 npm start。

Tips：除了 npm 外，还有一些包管理工具，次要是针对 npm 的下载速度慢、node_modules 凌乱等毛病设计的，例如 yarn 和 pnpm。

装置 Webpack-cli
Webpack-cli 是 Webpack 的 CLI（Command-line interface）工具，如果在我的项目中，咱们能够应用上面的形式装置：

npm install webpack-cli –save-dev
如果想全局应用 webpack 的命令，能够应用 npm install -g webpack-cli 装置。

Tips：这里倡议在我的项目中装置 webpack-cli 并且应用 –save-dev 的配置将 webpack-cli 放到开发依赖中。

到此，咱们就筹备好 Webpack 的命令行开发环境了，上面大节开始介绍 webpack-cli 的零配置打包。

小结
本文次要介绍了 Webpack 的开发环境搭建，从 Node.js 装置、NPM 的应用最根底开始解说，领导学生手把手的上手 Node.js 开发环境。并且介绍了 NPM 相干的命令应用和 NPM Scripts 概念，NPM Scripts 在用 NPM 搭建我的项目开发命令时被广泛应用，接下来咱们开始体验 Webpack-cli 的零配置打包吧！

欢送关注「慕课网」，发现更多 IT 圈优质内容，分享干货常识，帮忙你成为更好的程序员！

正文完