先感叹一句,前端的发展真是太快了,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. 对Socket CAN的理解(5)——【Socket CAN控制器的初始化过程】

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢! 对于一般的CAN模块,进行初始化时,最关键的是下面两步: 1.  配置CAN的位时序: 2.  配置CAN的消息报文 ...

  2. vue - 认识ora

    主要用来实现node.js命令行环境的loading效果,和显示各种状态的图标等... const ora = require('ora'); const spinner = ora('Loading ...

  3. win8 推送通知 小记

    http://blog.csdn.net/nacl025/article/details/8998552 http://blog.csdn.net/nacl025/article/details/90 ...

  4. js实现select跳转

    js简单实现select跳转功能:代码例如以下 <!DOCTYPE html> <html> <head> <title></title> ...

  5. android 完美的tabhost 切换多activity布局

    TabHost在很多应用都会使用到,有时候在TabHost添加的Tab中设置view不能满足需求,因为在view中添加如PreferenceActivity相当困难. 之前在一个应用中需要实现使用Ta ...

  6. userDao

    比如,我们这里有一个接口IUserDao,里面有,add和del两个方法.我们在项目中,有一个他的实现类:UserDao.但是我们现在想要统一为这个接口的所有实现类都添加一个查询search方法,那么 ...

  7. 檢查php文件中是否含有bom的php文件

    原文链接: http://www.cnblogs.com/Athrun/archive/2010/05/27/1745464.html 另一篇文章:<关于bom.php>,http://h ...

  8. 非常酷的 Javascript 简单调试工具Blackbird

    Blackbird 是一个开源的 Javascript 调试工具,默认提供一种非常酷的方式展现 Javascript 调试信息,如下图,效果如何呢? 在我们的日常的学习或工作中,经常都会接触到 Jav ...

  9. tcpdump抓包(转)

    Linux 环境下,通常通过 tcpdump 来进行抓包和分析.它是几乎所有 Linux 发行版本预装的数据包抓取和分析工具. tcpdump 工具的获取和安装可以参阅相应操作系统的官方文档,本文不再 ...

  10. netty的理解

    netty作为nio应用的典范,在很多设计方面都值得我们在程序开发中学习. 1.事件驱动,三种事件的传播机制.一种是在channel上触发,一种是在pipeline上触发,一种是在context上触发 ...