先感叹一句,前端的发展真是太快了,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. hexo 使用教程

    hexo 使用教程 这个早就用起来了,写给需要的小伙伴 mayufo.github.io 先扔出自己的地址 安装 想玩hexo,需要安装以下应用 git node 安装完成在终端输入 $ npm in ...

  2. CentOS系统使用yum安装配置MariaDB数据库

    http://www.server110.com/mariadb/201310/2670.html 1.在 /etc/yum.repos.d/ 下建立 MariaDB.repo,内容如下:[azure ...

  3. Linux rm 删除指定文件外的其他文件 方法汇总

    一.Linux下删除文件和文件夹常用命令如下: 删除文件: rm file 删除文件夹: rm -rf dir 需要注意的是, rmdir 只能够删除 空文件夹 . 二.删除制定文件(夹)之外的所有文 ...

  4. hdu1010 dfs+路径剪枝

    题意:用一个案例来解释 4 4 5 S.X. ..X. ..XD .... 在这个案例中,是一个4*4的地图. . 表示可走的地方, X 表示不可走的地方,S表示起始点,D表示目标点.没走到一个点之后 ...

  5. AngularJs学习笔记(3)——scope

    AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定. $rootScope是所有$scope对象的最上层,是AngularJS中最接近全局作用域的对象 . 一个n ...

  6. unity UGUI text font size对性能影响较大

    Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...

  7. SQl查询数据库表名、表的列名、数据类型、主键

    1.获取所有数据库名:     2.Select Name FROM Master..SysDatabases order by Name   3.  4.2.获取所有表名:   5.   (1)  ...

  8. Linux Ctrl+z bg fg jobs命令使用

    一.暂停前台运行时间长的程序 使用Ctrl + z然后可以看到系统提示: []+ Stopped /home/test/demo.sh 二.bg命令 将程序放到后台处理 bg  %jobnumber ...

  9. Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle

    Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3.  ...

  10. iOS开发多线程篇 11 —自定义NSOperation

    iOS开发多线程篇—自定义NSOperation 一.实现一个简单的tableView显示效果 实现效果展示: 代码示例(使用以前在主控制器中进行业务处理的方式) 1.新建一个项目,让控制器继承自UI ...