先感叹一句,前端的发展真是太快了,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. Alfresco 5.0.d 企业文档管理系统

    Thanks for downloading Alfresco Community Edition. Your download should begin in three seconds. If i ...

  2. Android API Guides---Host-based Card Emulation

    Host-based Card Emulation 很多提供NFC功能的Andr​​oid手机已经支持NFC卡模拟.在大多数情况下.该卡是由在该装置的单独芯片仿真,称为安全元件. 无线运营商提供了非常 ...

  3. 倍福TwinCAT(贝福Beckhoff)应用教程12.1 TwinCAT控制松下伺服 连接和试运行

    首先是用松下伺服自带的软件可以测试运行(驱动器,电机都连接好,然后用USB线连接到松下伺服驱动器的X1口),打开调试软件会自动提示连接到伺服   一般需要对驱动器清除绝对值编码器数据(驱动器可能报错4 ...

  4. There is insufficient memory for the Java Runtime Environment to continue问题解决

    在linux系统下长时间进行性能測试,连续几次发生server假死无法连接上的情况,无奈仅仅能重新启动server.在測试路径下发现hs_err_pid17285.log文件,打开文件查看其主要内容例 ...

  5. yoman搭建你的react-webpack应用

    还没有npm和node的要提前做好准备工作 做好这一切之后 我们安装yo,记住安装在全局变量中,我们需要用他的命令工具 npm install -g yo 接下来安装yo提供的react-webpac ...

  6. @using (Html.BeginForm()) @using (Ajax.BeginForm(new AjaxOptions() { })) 区别

    @using (Html.BeginForm()) 返回页面 也是页面 都是返回页面 只是 多了一个 data-ajax="true"

  7. 二维数组,锯齿数组和集合 C# 一维数组、二维数组(矩形数组)、交错数组(锯齿数组)的使用 C# 数组、多维数组(矩形数组)、锯齿数组(交叉数组)

    二维数组,锯齿数组和集合 一.二维数组 二维数组:一维数组----豆角二维数组----表格 定义:1.一维数组:数据类型[] 数组变量名 = new 数据类型[数组长度];数据类型[] 数组变量名 = ...

  8. CSDN开源夏令营 百度数据可视化实践 ECharts(4)

    ECharts知识点总结: 在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比較难的知识点,方便理解概念.进而更好的掌握ECharts. (1)1.  一个完整的option包括什么?能 ...

  9. Android AIDL Service 跨进程传递复杂数据

    黑夜 黑夜给了我黑色的眼睛,我却用它寻找光明~ 传值方式 AIDL是同意跨进程传递值的,一般来说有三种方式: - 广播:这样的算是比較常见的一种方式了,传递小数据不错 - 文件:这个是保存到文件里.然 ...

  10. netstat命令初探

    Proto :网络传输协议,主要为tcp和udp Local Address :本地的ip:port Foreign Address:远程主机的ip:port State :连线状态,主要有监听( L ...