如果你看过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. Python 6 数字和布尔值及字符串的基本功能

    数据类型:查看变量数据类型type(变量)  或者  print(type(变量)) 整数int:就是不带小数的自然数字,也叫整型.在2.X版本中还分为长整型和整形.但是在3.X版本中统一称为整数或整 ...

  2. centOS下安装mysql workbench详细步骤

    step0:安装mysql 在按照workbench之前,先安装mysql.指令是 yum install mysql mysql-server mysql-libs mysql-server 关于m ...

  3. 草草弄完SPRING WEB-FLOW

    明天白天再慢慢看原理吧. 今天先把代码实习一次. 作作截图存照.

  4. LINUX 内核内存管理

    https://linux-mm.org/ http://www.cnblogs.com/liloke/archive/2011/11/20/2255737.html

  5. HDU--1054--Strategic Game【最小点覆盖】

    链接:pid=1054">http://acm.hdu.edu.cn/showproblem.php?pid=1054 题意:一个熊孩子玩策略游戏,他须要用最少的士兵守卫最多的道路.假 ...

  6. (IT/互联网行业)你给自己当前的职位拼几分?(评分标准,个人看法,勿喷~)

    常常有身边的关系好的朋友或网友.问如今我该不该跳槽的问题. 我一般给他们的答复你能给当前的工作拼几分. 下面是我自己总结的一个评分标准.如有不当之处,勿喷~ --------------------- ...

  7. MySql存储过程与函数

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来运行 ...

  8. oop_day02_类、重载_20150810

    oop_day02_类.重载_20150810 1.怎样创建类?怎样创建对象? 2.引用类型之间画等号: 家门钥匙 1)指向同一个对象(数据有一份) 2)对当中一个引用的改动.会影响另外一个引用 基本 ...

  9. Java 二进制和十进制互转,二进制和BitSet互转

    /** * 二进制转十进制 * * @param binaryNumber * @return */ public static int binaryToDecimal(int binaryNumbe ...

  10. 1D1D动态规划优化

    1D1D动态规划优化 1D/1D 动态规划优化初步所谓1D/1D 动态规划,指的是状态数为O(n),每一个状态决策量为O(n)的动态规划方程.直接求解的时间复杂度为O(n2),但是,绝大多数这样的方程 ...