先感叹一句,前端的发展真是太快了,ng和bb还没怎么学好就要过时了。现在感觉react当是未来的一个大方向。

以前一直用的grunt,不过前段时间作者已经停止更新了。正好webpack风头正盛,咱也不能落伍,也来看看webpack到底是有什么出色的地方。

1.要安装webpack,首先需要安装nodejs

安装nodejs,你可以挫下面的地址:https://nodejs.org/en/

下载完成以后就可以一直下一步安装了。我是安装在了d盘的根目录下

安装完成以后可以使用cmd输入命令查看是否安装成功。

再通过查看环境变量,我们可以看到下面的D:\nodejs\ 说明确实安装成功了

2.配置npm的路径

npm是nodejs的一个模块化管理工具,现在已经集成到nodejs中了,不需要再另外安装

我首先配置一下npm的全局存放路径以及缓存路径,我将两个文件夹建立在了nodejs的根目录下

启动cmd,键入如下的命令:

npm config set prefix "d:\nodejs\node_global"
npm config set cache "d:\nodejs\node_cache"

3.通过npm安装webpack

启动cmd,键入如下的命令:

npm install webpack -g

安装完成后信息如上:会显示安装的路径,版本号及目录结构等。

4.修改默认的node路径

新建一个NODE_PATH的键,输入你自己给定的全局存放路径

同样,用户变量中的PATH路径也要改成和NODE_PATH一直的路径

administrator中path添加d:\nodejs\node_global;

5.检测是否配置成功

以上的步骤全部完成以后,我们打开CMD,输入node,再键入require('webpack')

初探webpack之环境配置的更多相关文章

  1. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  2. webpack开发环境配置和生产环境配置

    开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...

  3. vue2+webpack 开发环境配置

    前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...

  4. vue2.0 + npm + webpack 开发===环境配置

     cnpm安装:npm install -g cnpm --registry=http://registry.npm.taobao.org 1.安装vue-cli脚手架构建工具cnpm install ...

  5. VUE开发--环境配置(一)(转)

    无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_so ...

  6. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  7. 手把手教你webpack、react和node.js环境配置(上篇)

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  8. 手把手教你webpack、react和node.js环境配置(下篇)

    上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...

  9. React+ES6+Webpack环境配置

    转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...

随机推荐

  1. [Functional Programming] Randomly Pull an Item from an Array with the State ADT (Pair)

    Functor composition is a powerful concept that arises when we have one Functor nested in another Fun ...

  2. $ 和getElementId的区别 / 一个jquery对象的原型

    请说出 div 和 $div 的联系和区别 区别 div 返回一个HTML DOM Object $div 返回一个 jQuery Object, 两者不等价 $div是包装了dom对象后产生的,无法 ...

  3. Unity 编辑器扩展 场景视图内控制对象

    http://blog.csdn.net/akof1314/article/details/38129031 假设有一个敌人生成器类,其中有个属性range用来表示敌人生成的范围区域大小,那么可以用O ...

  4. java.net.ConnectException: failed to connect to /10.0.2.2 (port 80): connect

    在使用GENYMOTION作为Android程序调试模拟器连接web服务器时,报了:java.net.ConnectException: failed to connect to /10.0.2.2 ...

  5. AutoResponder及正则表达式

    使用AutoResponder选项卡,你可以创建一个匹配规则和一个响应字符串,如果请求的URL地址跟你的匹配规则相匹配,Fiddler就会自动执行这个对应的响应字符串. 小提示: 匹配规则会按照它在规 ...

  6. 微信小程序bindtap和catchtap区别

    bindtap可以产生冒泡事件 catchtap只自身触发事件,不会传递到父视图         文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注 ...

  7. android 开机自启动的几种方法,监听不到RECEIVE_BOOT_COMPLETED的处理办法

    第一种:  监控RECEIVE_BOOT_COMPLETED,即开机启动事件 另外一种: 监控sd卡mount事件  开机总会扫描sd卡吧? 监控sd卡事件也有类似开机启动效果.特别app安装在sd卡 ...

  8. Array,Vector,List,Deque的区别与联系【转+改】

    数组 内存连续分配,长度大小固定,内置的最基础的数据结构之一.支持随机访问和随机存储. 该类型数据所占内存空间最小. Vector 是C++ STL中的一个容器.和数组类似,它拥有一段连续的内存空间, ...

  9. mysql bin路径下的mysql被杀毒软件查杀后恢复过来也无法启动

    mysql服务被杀毒软件干掉之后操作 文件恢复过来后还是无法启动 同事使用杀毒软件之后发现,mysql的服务被干掉了.之后想到了处理办法: mysqld-nt -installnet start my ...

  10. linq-to-sql实现left join,group by,count

    linq-to-sql实现left join,group by,count 用linq-to-sql实现下面的sql语句: SELECT p.ParentId, COUNT(c.ChildId) FR ...