今天,开始学习第二节!!!

工欲善其事,必先利其器

react推荐我们使用webpack来打包文件,那么我们就用吧!(其实真心不想用啊)

至于好处网上写的天花乱坠的,大家自行解决啊...

这节主要就学习怎么配置webpack了,这玩意我捣鼓了整整一天才弄的一知半解,哎,脑子差就是吃亏...

1.提前准备工作

(ps:自己装好node啊,别怪我没提醒你)

首先,你需要有一个自己的文件夹,至于什么名字你自己看着办,我的叫做  reactdemo

里面放一个测试的html加一个js文件夹

2.安装

  2.1

点击win+r,输入cmd进入控制台,然后进入自己的目录

输入npm init

里面的东西一路回车就好

然后进入你的文件夹里面看是不是多了个package.json的文件

  2.2

ok,现在我们先来一发全局安装。

继续输入npm install -g webpack

然后默默等待...

  2.3

现在可以配置webpack了,这个要下的东西比较多,网速不好者默哀吧(我整整用了2个小时  - -!)

Style-loader加载器

输入npm install style-loader --save-dev

(加载器部分就不在上图了啊,因为刚装过,在装一遍太浪费时间了,不好意思啊,原谅我的懒惰吧)

css-loader加载器

输入npm install css-loader --save-dev

jsx-loader加载器

输入npm install jsx-loader --save-dev

之后局部安装webpack

输入npm install webpack --save-dev

成功后你的文件夹变身成为这个样纸:

3.使用

这个用之前,还要创建一个webpack.config.js的文件,这个文件呢,就是告诉webpack你要做什么,这里是个demo,所以里面就写简单点(多了的我还没搞懂呢,哼!)

终于到能用的时候了,想想内心还是有点小激动的呢!

当当当当,成功啦...

这时候你的文件夹成了这个样纸:

webpack自动帮我们生成了build文件夹,里面有个build.js...

然而我的html里也不用再引入index.js,直接引入build.js就可以了...

这样基本就都差不多了

另外我自己在用的时候还遇见过出现不是内部命令(好像是叫这个,大家懂就好啦)这个错误,这里将解决方法也贴出来好了

一般这种情况是因为环境变量的问题

我们通过按win+Pause进入

选择我画的那个,点击这个:

进入后:

点击编辑或者双击将路径添加进去。

这个时候聪明的宝宝就会问路径在哪啊?额,疏忽了,这个你们看完路径可能要从上面再来一遍。

路径:

接着进入:

找到webpack.cmd:

反正我的在这里,别人的是不是我还真不知道。

复制这个:

好啦,这个就是路径啦,添加到上面说的环境变量里,就OK啦!!!

结尾名言:不存在十全十美的文章,如同不存在彻头彻尾的绝望。

(上一章被GM鄙视了,说不是技术文章,不让放首页,确实我很菜,但也不用这样吧!!!气煞我也;气煞我也;气煞我也...)

参考资料:webpack官方网站 http://webpack.github.io/

     30分钟手把手教你学webpack实战 http://www.th7.cn/web/html-css/201509/120709.shtml(这个大大写的确实挺好,最起码不会云里雾里的,像我这种智商的都能看懂)

从0开始学习react(二)的更多相关文章

  1. 从0开始学习react(一)

    本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...

  2. 正式学习react(二)

    今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 c ...

  3. 从0开始学习react(三)

    这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...

  4. 五分钟学习React(二):我的第一个Hello World

    我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...

  5. Angular2.0的学习(二)

    第二节课 1.了解路由的基础知识 2.子路由.辅助路由.路由守卫和保护路由 路由守卫: CanActivate:处理导航到某路由的情况 CanDectivate:处理从当前路由离开的情况 Resolv ...

  6. python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法

    python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...

  7. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  8. React学习-React初识

    一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...

  9. 为什么学习React Native三点原因

    React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...

随机推荐

  1. 【JavaScript】停不下来的前端,自动化流程

    http://kb.cnblogs.com/page/501270/ 流程 关于流程,是从项目启动到发布的过程.在前端通常我们都做些什么? 切图,即从设计稿中获取需要的素材,并不是所有前端开发都被要求 ...

  2. [ES6] 12. Shorthand Properties in ES6

    Where destructuring in ES6 allows you to easily get properties out of an object, this shorthand prop ...

  3. js 处理url中文参数 java端接收处理

    正常情况下当http请求中带有中文参数时,浏览器会自动对中文进行一次编码(按照当前页面的pageEncoding),java端容器会对接收到的参数自动进行一次转码,则request.getParame ...

  4. ext2文件系统

    2.1. 总体存储布局 我们知道,一个磁盘可以划分成多个分区,每个分区必须先用格式化工具(例如某种mkfs命令)格式化成某种格式的文件系统,然后才能存储文件,格式化的过程会在磁盘上写一些管理存储布局的 ...

  5. Docker 1.12.0将要发布的新功能

    Docker 1.12.0将要发布的新功能 导读 按计划,6/14 是1.12.0版本的 feature冻结 的日子,再有两个星期Docker 1.12.0也该发布了.这里列出来的新功能,都是已经合并 ...

  6. Spring3中js/css/jpg/gif等静态资源无法找到(No mapping found for HTTP request with URI)问题解决--转载

    原文地址:http://www.programgo.com/article/96083031845/ 最近项目中使用到Spring3,在感叹Spring3注解配置清爽的同时竟然出现了这个不和谐的事情, ...

  7. Steps to Install Hadoop on CentOS/RHEL 6---reference

    http://tecadmin.net/steps-to-install-hadoop-on-centosrhel-6/# The Apache Hadoop software library is ...

  8. socket通信简介

    转:http://blog.csdn.net/xiaoweige207/article/details/6211577 “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的 ...

  9. Java基础知识强化之IO流笔记74:NIO之 Buffer

    Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...

  10. OC之Copy语法

    转载请注明:http://www.cnblogs.com/letougaozao/p/3631105.html 概念 内存管理 NSString的copy实例 对象的copy实例 一.概念 目的:在改 ...