通过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了!

 

posted @ 2017-01-04 16:36  NickBai  阅读(64712)  评论(2编辑  收藏  举报