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/