如果你看过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篇）的更多相关文章

  1. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  2. webpack 学习资料

    webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/

  3. webpack学习（六）—webpack+react+es6（第2篇）

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  4. reactjs学习一（环境搭配react+es6+webpack热部署）

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  5. webpack学习（六）—webpack+react+es6（第3篇）

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  6. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  7. React+ES6+Webpack环境配置

    转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...

  8. React+ES6+Webpack深入浅出

    React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再 ...

  9. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

随机推荐

  1. 联赛前集训日记Day1

    考试 炸的凄惨 T1 显然要高精搞一下,然而我的$DFS$竟然比我的$O(n^{2})$递推快 T2 欧拉路径的题,很不可做的样子,就没敢费时间打 T3 $DFS$枚举可过,然而我太蠢 GG 刷题 改 ...

  2. 【学QT】1 - QT的安装

    1.解压文件在/usr/local/下 #tar zxvf qt-x11-free-3.3.8b.tar.gz -C /usr/local 更改文件夹名称为qt #mv /usr/local/qt-x ...

  3. du 和 df的不同

    http://blog.sina.com.cn/s/blog_9c8286b7010108aj.html du和df命令都被用于获得文件系统大小的信息:df用于报告文件系统的总块数及剩余块数,du - ...

  4. ACM数论总结

    ACM数论总结 http://blog.csdn.net/xieshimao/article/details/6425099 断断续续的学习数论已经有一段时间了,学得也很杂,现在进行一些简单的回顾和总 ...

  5. kendo Grid json解析的问题

    新建立了一个 页面,在grid中使用了dropdownlist,总是显示companyId is not defined ,以前这个问题解决过了,忘记记录了额,现在不知道怎么办了 下面的这个解决方法是 ...

  6. [bzoj3524/2223][Poi2014]Couriers_主席树

    Couriers bzoj-3524 Poi-2014 题目大意:给定n个数的序列,询问区间内是否存在一个在区间内至少出现了(区间长度>>1)次的数.如果有,输出该数,反之输出0. 注释: ...

  7. 【cocos2d-x 3.7 飞机大战】 决战南海I (十) 游戏主场景

    主场景要包括其它类的头文件 #include "cocos2d.h" #include "MyPlane.h" #include "Bullet.h& ...

  8. 使用Pods和自定义静态库实现多工程联编

    使用Pods和自定义静态库实现多工程联编 字数607 阅读112 评论0 喜欢0 近来随着公司项目开发的深入,项目的规范也就越来越高了,为了更加方便的管理自定义静态库与pods之间的联系,好好的研究了 ...

  9. ASP原码加密工具介绍

    ASP原码加密工具介绍 总是会有非常多方法暴露ASP的原程序.造成数据库的password 路径都能够轻易被其它人搞到,所以对ASP程序实行加密处理是个不错的解决方法.以下来介绍一个工具假设大家感兴趣 ...

  10. 两个向量之间的欧式距离及radial-basis-functions(RBF)

    template <class DataType1, class DataType2>double EuclideanDistance(std::vector<DataType1&g ...