安装webpack缓慢的解决方法

安装webpack缓慢的解决方法

一、webpack简单介绍

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

二、webpack安装及安装可能出现的问题

使用npm安装webpack的时候会出现安装非常缓慢的情况,有时候甚至一个小时也下载不了,这是因为npm是从国外服务器上下载webpack的,解决这个问题的方法是使用淘宝网提供的国内NPM镜像cnpm。

首先使用npm下载cnpm,npm install -g cnpm --registry=http://registry.npm.taobao.org

下载完成后,重新打开控制台,输入cnpm,如果你的node.js和npm的版本不够高的话会报错,这时候你就需要升级一下你的node.js和npm了,最简单的升级方式就是直接到node.js的官网Node.js下载最新的版本,安装的时候新版本会自动覆盖旧版本,升级成功后,你就能使用cnpm了,cnpm的使用和npm的使用方式是一样的,只不过cnpm下载的内容是只读的,当然有了cnpm,你依然是可以使用npm的。

下面就用cnpm下载webpack,输入cnpm install webpack -g,全局安装webpack,这样你才能全局使用webpack命令.

三、使用webpack的前提知识

新建一个项目,如webpack-demo,控制台中切换到该目录下,然后输入npm init,这样会自动生成一个npm标准说明文件package.json,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。但你朋友copy你项目的时候,可以不copy你项目的依赖,因为npm install会下载当前文件夹下package.json中指明的所有依赖,所以你朋友可以使用npm install重新为这个项目下载依赖。

那么说到项目的依赖,就需要说一下npm install --save-dev module-name、npm install --save module-name和npm install module-name的区别了

当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里(dependencies)。--save和--save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name --save 自动把模块和版本号添加到dependencies部分

npm install module-name --save-dev 自动把模块和版本号添加到devdependencies部分

至于配置文件区分这俩部分, 是用于区别开发依赖模块和产品依赖模块, 以我见过的情况来看 devDepandencies主要是配置测试框架, 例如jshint、mocha。

编辑于 2016-11-08