通过npm安装webpack
现在js发展太快了,根本看不懂啊。于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧。写在本地的环境下,
发现各种报错,根本不能用。还在纳闷呢,这个例子是怎么能写成这个样,还在那教人的呢?误人子弟?怎么跑呢?各种搜索才发现,原来我们一般常用的js是遵循的ES5规范,由于浏览器
支持等各种原因,我们需要将最新的ES6语法变成ES5才能以我们熟知的方式运行。于是乎,针对ES6的就出现了很多打包工具。webpack就是其中一款。
现在知道了,这个是干嘛的(当然写这篇文章的时候,我还是不怎么明白这些东西之间的关系)。我们先安装吧。 幸好在很久很久以前,我安装过node了,那么npm工具我也装过了。没
装过npm的自行百度吧。声明一点,我是在win7的环境下安装的。windows研究node你懂得,各种报错到爆炸,再加上根本不懂这些东西,所以各种无解的错误,让人奔溃。
好了,言归正传,那我们开始安装吧!我假定 你像我一样拥有了 npm
安装 webpack,以全局的方式安装:
$ npm install webpack -g
然而,我并不喜欢这种方式,因为并不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
# 进入项目目录 # 确定已经有 package.json,没有就通过 npm init 创建 # 安装 webpack 依赖 $ npm install webpack --save-dev
补充一点吧:像我一样对package.json 各种参数了解很水的。可以自己百度一下package.json各个参数的意思。我放出一个可用的吧:
package.json
{ "name": "demo", "version": "0.0.1", "dependencies": { "webpack": "latest" }, "devDependencies": { "webpack": "^1.14.0" } }
安装的过程中可能会很慢,一直卡在那转圈。原因你懂得,我们上的是一个局域网,外面的世界不是你想看就能看的。。。。。如果你像我一样,不能FQ,那你就先
暂停吧。执行下面的语句:
npm config set registry https://registry.npm.taobao.org
用一下国内的良心镜像。你会发现再执行 npm install webpack --save-dev 会很快的安装完毕。安装完成之后,你会发现,项目中多了一个 node_modules文件夹
里面有一个 .bin和webpack文件夹。此时我们打开终端,输入 webpack会提示 webpak不是内部命令。不用怕,因为这个执行文件在你的项目下的 node_modules\.bin
下面,只要将这个路径配入 环境变量的 path中去 ,就可以愉快的使用 webpack了!