webpack学习（五）—webpack+react+es6（第1篇）
如果你看过webpack学习系列的前一个文章，接下来做的东西会比较简单 ：webpack学习（四）— webpack-dev-server
react发展的很快，现在大部分开发react相关的项目，都会用到这个组合：webpack+react+es6
还是以一个项目举例，项目中的package.json是生成的，"devDependencies"都是自己手动安装加入，如果拷贝网上的资料，已存在package.json文件且内容完整，可以npm install直接安装所需要的插件。
第一次接触，为了一探react的具体开发流程，还是自己一个个安装比较好。
如果你在看本文，请按照以下步骤操作即可：
项目目录：
package.json
{
"name": "pro4",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --inline --hot --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.0",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script src="build/bundle.js"></script>
</body>
</html>
webpack.config.js
var path = require("path");
module.exports = {
entry:[
'./src/js/app.js'
],
output: {
path: path.resolve('./', "dist"),
publicPath: "build",
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.js?$/, exclude: /node_modules/, loaders: [ 'babel?presets[]=react,presets[]=es2015' ] },
{ test: /\.css$/, loader: 'style!css'}
]
},
resolve:{
extensions:['','.js','.json']
},
};
src/js/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Helloworld from './helloworld'; // ReactDOM.render
// (<Helloword/>,document.getElementById('content');
// );
ReactDOM.render
(
<Helloworld/>,
document.getElementById('content')
);
src/js/helloword.js
import React from 'react';
import ReactDOM from 'react-dom'; class Helloworld extends React.Component{ constructor(props) {
super(props);
} render(){
return(<h1>Hello World！！！！！！</h1>)
}
} module.exports = Helloworld
至此，项目结构，文件都已完成
安装: npm init
启动：npm run dev
项目地址：http://localhost:8080/index.html
说明：
1）本文例子中package.json包含的 "devDependencies"项，是webpack+react+es6开发的最少的安装。本例热加载，修改任何一个src/js下的js文件，保存，浏览器自动更新。
2）本文例子并没有安装react-hot-loader，原因是直接安装，目前版本一到3.0以上，并不支持在webpack.config.js中这么书写：
{test: /\.js?$/, exclude: /node_modules/, loaders: ['react-hot','babel-loader?presets[]=react,presets[]=es2015'] },
如果写了，webpack-dev-server会报错：
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately
但是，用低版本的react-hot-loader不会报错。
而且你会发现，现在不用react-hot-loader，也可以热加载。
3）js的加载器：
{test: /\.js?$/, exclude: /node_modules/, loaders: [ 'babel?presets[]=react,presets[]=es2015' ] },
这里很重要，先用babel-loader将es6(es2015),react的语法（jsx）转换为目前浏览器普遍支持的语法，即es5。
如果这里配置出错，或者没有安装除了babel外的2个loader，会报错
Module build failed: SyntaxError: Unexpected token
因为你在return里写的HTML标签不识别（不是字符串）。
4)如果要兼容老版本浏览器，支持es3语法。还需要用es3ify-loader。本例没有用。
5）如果你想输出文件，执行webpack -p即可生成dist目录下的bundle.js文件。再建个html文件，引入bundle.js。即可看到helloworld！！！！。这就是我们发布的js，html。
6）本例没有对html文件进行处理。上一步会显得别扭。这个后续慢慢探索吧。。。
7）ES6的最直接体现是我们创建组件的时候，用class而不是React.creatClass这个方法了。此外，import也是ES6新加入的，用于引入模块。
webpack学习（五）—webpack+react+es6（第1篇）的更多相关文章
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack 学习资料
webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/
- webpack学习（六）—webpack+react+es6（第2篇）
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- reactjs学习一（环境搭配react+es6+webpack热部署）
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- webpack学习（六）—webpack+react+es6（第3篇）
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- React+ES6+Webpack环境配置
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
- React+ES6+Webpack深入浅出
React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再 ...
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
随机推荐
- centOS下安装mysql workbench详细步骤
step0:安装mysql 在按照workbench之前,先安装mysql.指令是 yum install mysql mysql-server mysql-libs mysql-server 关于m ...
- N天学习一个Linux命令之帮助命令：man
前言 工作中每天都在使用常用的命令和非常用的命令,忘记了用法或者参数,都会bing一下,然后如此循环.一直没有真正的系统的深入的去了解命令的用法,我决定打破它.以前看到有人,每天学习一个linux命令 ...
- spring mvc之applicationContext
1.ApplicationContext是在package org.springframework.context下,是spring的,spring context包下的. applicationCo ...
- iOS：如何让xib同时兼容支持iOS6和iOS7
做法如下: 1. 取消xib的Use Autolayout属性的勾选: 2. 将xib中每一个子控件(没错,每一个控件,包括UIButton.UILabel等等),将它们的Y Frame的值全部增加2 ...
- 2015 测试赛 同构 hihoCoder
题目1 : 同构 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定2个树A和B,保证A的节点个数>=B的节点个数. 现在你需要对树A的边进行二染色. 一个好的染色 ...
- ustc 1117
无根树同构 有两种方法,一种是确定其中一棵树,另一棵树枚举根节点. 一种是,利用拓扑排序,先确定其中一棵树.另一棵树,若拓扑后剩两个节点,则枚举这两个节点为根结点,否则,只需做一次.注意,无根树节点入 ...
- java 线程 原子类相关操作演示样例 thinking in java4 文件夹21.3.4
java 线程 原子类相关操作演示样例 package org.rui.thread.volatiles; import java.util.Timer; import java.util.Time ...
- Linux模块化机制和module_init
致谢: 微信公众号:嵌入式企鹅圈 每天都新增爱好者关注,感谢大家的支持和大牛们的建议. 本人将竭力出品很多其它优质的原创文章回馈大家的厚爱. 引子:模块化机制长处 模块化机制(module)是Linu ...
- (七)CAS 本地localhost调试,无法单点退出疑问
干活的时候要多思考-------- 题记 昨天下午接到任务把内容汇聚平台和分发平台加上统一认证登录,之前弄过CAS,想想这个过程也就是按部就班的事情.在两个系统中we ...
- 怎样使用ListView实现一个带有网络请求，解析，分页，缓存的公共的List页面来大大的提高工作效率
在寻常的开发中常常会有非常多列表页面.每做一个列表页就须要创建这个布局文件那个Adapter适配器文件等等一大堆与之相关的附属的不必要的冗余文件. 假设版本号更新迭代比較频繁,如此以往,就会使项目pr ...