mac下WebPack 安装

webpack安装

首先必须要先安装nodejs

nodejs可以直接去官网下载mac

推荐使用本地安装，不建议用全局安装。因为我们不同的项目可能使用不同的版本号

安装步骤演示如下:

第一、初始化package.json文件

进如一个空的文件夹

# 1.初始化package.json文件
10:webpack-learning cll$ npm init -y
Wrote to /Users/cll/Documents/workspace/webpack-learning/package.json:

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

执行上面的命令之后，可以看到在目录下生成一个package.json的文件。内容如下

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

第二、本地安装webpack

npm默认会去国外的镜像去下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像
下边我们来安装cnpm:
有时我们使用npm下载资源会很慢，所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。

输入命令，进行全局安装淘宝镜像。

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

安装后，我们可以使用以下命令来查看cnpm的版本

10:webpack-learning cll$ cnpm -v
cnpm@6.0.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.7.0 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.9.0 (/usr/local/Cellar/node/10.9.0/bin/node)
npminstall@3.20.2 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin x64 17.7.0
registry=https://registry.npm.taobao.org

nrm ls 查看镜像的指向

如果nrm没有安装则需要进行全局安装:cnpm install -g nrm

10:webpack-learning cll$ nrm ls
-bash: nrm: command not found
10:webpack-learning cll$ cnpm install -g nrm
Downloading nrm to /usr/local/lib/node_modules/nrm_tmp
Copying /usr/local/lib/node_modules/nrm_tmp/_nrm@1.0.2@nrm to /usr/local/lib/node_modules/nrm
Installing nrm's dependencies to /usr/local/lib/node_modules/nrm/node_modules
[1/9] async@^1.5.2 installed at node_modules/_async@1.5.2@async
[2/9] only@0.0.2 installed at node_modules/_only@0.0.2@only
[3/9] ini@^1.1.0 installed at node_modules/_ini@1.3.5@ini
[4/9] open@0.0.5 installed at node_modules/_open@0.0.5@open
[5/9] extend@^3.0.0 installed at node_modules/_extend@3.0.2@extend
[6/9] commander@^2.9.0 installed at node_modules/_commander@2.19.0@commander
[7/9] node-echo@^0.1.1 installed at node_modules/_node-echo@0.1.1@node-echo
[8/9] request@^2.72.0 installed at node_modules/_request@2.88.0@request
[9/9] npm@^3.10.3 installed at node_modules/_npm@3.10.10@npm
deprecate node-echo@0.1.1 › coffee-script@~1.7.1 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
deprecate node-echo@0.1.1 › jistype@0.0.3 › coffee-script@^1.7.1 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
All packages installed (60 packages installed from npm registry, used 2s(network 2s), speed 2.17MB/s, json 57(186.27kB), tarball 4.32MB)
[nrm@1.0.2] link /usr/local/bin/nrm@ -> /usr/local/lib/node_modules/nrm/cli.js
10:webpack-learning cll$ nrm ls

使nrm use XXX切换 镜像

10:webpack-learning cll$ nrm ls

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

10:webpack-learning cll$ nrm use taobao


   Registry has been set to: https://registry.npm.taobao.org/

10:webpack-learning cll$ nrm ls

下面就进行安装步骤了

进入webpacktest测试目录目录，本地安装:

只在本项目中使用webpack，需要进行本地安装，因为项目和项目所用的webpack的版本不一样。本地安装就会 将webpack的js包下载到项目下的npm_modeuls目录下。

npm install --save-dev webpack 或 cnpm install --save-dev webpack 
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli) 

全局安装加-g，如下: 全局安装就将webpack的js包下载到npm的包路径下。
npm install webpack -g 或 cnpm install webpack -g

安装完成后

目录结构如下

10:webpack-learning cll$ ls
node_modules		package-lock.json	package.json

Packeage.json文件内容也更改了，如下

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

可以看到webpack的安装版本号

此刻，说明我们已经完成了本地的安装步骤。

小记

此时在命令窗口输入命令webpack，会提示环境变量中没有这个命令，但我们能够从 node_modules/.bin/webpack 访问它的 bin 版本。

此外我们也可以在package.json中配置script。

"scripts": {
       "dev": "webpack"
},

当终端输入命令 npm run dev时就可以运行dev后面的语句，这时webpack命令生效了，这时因为使用npm run 命令时会将node_modules/.bin/目录临时添加到环境变量下面。

详细说明可以查看官方文档https://www.webpackjs.com/guides/production/