一分钟搭建Webpack+react+es6框架
最近react刷屏的厉害，而随着它一起走进我们视野的还有webpack，webpack只是个工具，为什么如此火呢？因为简单好了不废话。
npm install -g webpack
npm install -g webpack-dev-server mkdir webpack-react-es6
cd webpack-react-es6
npm init
# 一直点回车 如果懒得填一些信息
打开package.json 复制以下代码：
{
"name": "react-es6-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.10.0",
"react": "^0.14.7",
"react-hot-loader": "^1.3.0",
"react-transform-hmr": "^1.0.4",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
创建webpack.config.js，复制以下代码：
var path = require('path');
var webpack = require('webpack');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
// var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./app/index.js"
],
output: {
path: BUILD_PATH,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets:['react','es2015']
}
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'sass'],
include: APP_PATH
}, {
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
}
]
},
resolve:{
extensions:['','.js','.json']
},
devServer: {
hot: true,
inline: true
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
根目录下创建index.html，为了调试用：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>New React App</title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
根目录下创建app文件夹，新建index.js
import React from 'react';
import ReactDOM from 'react-dom'; let App = React.createClass({
render() {
return(<h1>Hello, world!</h1>);
}
}); ReactDOM.render(<App/>, document.getElementById('content'));
如果实在安装不成功，就直接下载http://pan.baidu.com/s/1bnYgWgv。
一分钟搭建Webpack+react+es6框架的更多相关文章
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- webpack学习（六）—webpack+react+es6（第3篇）
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- webpack学习（六）—webpack+react+es6（第2篇）
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- webpack学习（五）—webpack+react+es6（第1篇）
如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...
- 搭建 webpack + react 框架爬坑之路
由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...
随机推荐
- Unity手游之路<六>游戏摇杆之Easy Touch 3教程
之前已经介绍过Unity自带的摇杆Joystick,它用起来很简单.但是它也存在很多局限,不能全部满足普通mmo手游的一些需求,例如:要能方便地更好素材:能指定在某个区域显示,或者只有在该区域触摸时才 ...
- linux命令之cat
转自:http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容, ...
- 基于smack的xmpp packet 重写
基于Smack 实现Notification数据包.smack的类中有一个org.jivesoftware.smack.packet.IQ只需对他重写即可,在做的时候其实可以简单一点的,如果你使用ti ...
- Android+OpenCV 摄像头实时识别模板图像并跟踪
通过电脑摄像头识别事先指定的模板图像,实时跟踪模板图像的移动[用灰色矩形框标识] ps:一开始以为必须使用OpenCV Manager,可是这样会导致还需要用户去额外安装一个apk,造成用户体验很差, ...
- Android自定义进度条
Android原生控件只有横向进度条一种,而且没法变换样式,比如原生rom的样子很丑是吧,当伟大的产品设计要求更换前背景,甚至纵向,甚至圆弧状的,咋办,比如ok,我们开始吧: 一)变换前背景 先来看看 ...
- Multipart Upload with HttpClient 4--reference
by Eugen Paraschiv on May 23, 2014 in HttpClient http://www.baeldung.com/httpclient-multipart-upload ...
- WPF非轮询方式更新数据库变化SqlDependency（数据库修改前台自动更新）
上一章节我们讲到wpf的柱状图组件,它包含了非轮询方式更新数据库变化SqlDependency的内容,但是没有详细解释,现在给大家一个比较简单的例子来说明这部分内容. 上一章节: WPF柱状图(支持数 ...
- web服务器决定支持多少人同时在线的因素
经常遇到一些做WEB用户咨询服务器支持在线人数问题,在此做个简单介绍.非技术性讨论,如有疏漏或错误,敬请原谅和指导.以普通单路服务器为例,CPU处理多个进程,并非是同一时刻处理的,(可以精确到1/10 ...
- Android中的Handler的机制与用法详解
概述: 很多android初学者对android 中的handler不是很明白,其实Google参考了Windows的消息处理机制, 在Android系统中实现了一套类似的消息处理机制.在下面介绍ha ...
- c#中[Flags] 枚举类型定义问题_百度知道
[Flags]的微软解释是“指示可以将枚举作为位域(即一组标志)处理.”其实就是在编写枚举类型时,上面附上Flags特性后,用该枚举变量是既可以象整数一样进行按位的“|”或者按位的“&”操作了 ...