webpack.config.js

var webpack=require("webpack");
var htmlWebpackPlugin=require('html-webpack-plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var openBoweserPlugin=require('open-browser-webpack-plugin'); module.exports={
entry:'./src/script/app.js',
output:{
path:__dirname+'/build',
filename:'app.js'
},
devServer:{
contentBase:'./build',
host:'localhost',
port:5000,
historyApiFallback:false,
proxy:{
'/api':{
target:'http://localhost:9000',
pathRewrite:{
'^/api':''
},
changeOrigin:true
}
}
},
module:{
loaders:[
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test:/\.scss$/,
loader:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader!sass-loader'
})
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
} ]
},
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'./src/index.ejs',
title:'联连Life'
}),
new ExtractTextPlugin({
// filename:'app_[hash].css',
filename:'app.css',
disable:false,
allChunks:true
}),
// new webpack.optimize.UglifyJsPlugin({
// compress:{
// warnings:false
// },
// output:{
// comments:false
// }
// }),
new openBoweserPlugin({url:'http://localhost:5000'})
],
externals:{
'react':'window.React',
'react-dom':'window.ReactDOM',
'react-router':'window.ReactRouter',
'redux':'window.Redux'
} }

.babelrc

{
"presets":["es2015","react","stage-0"],
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
] }

package.json

{
"name": "dev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.22.0",
"babel-runtime": "^6.23.0",
"classnames": "^2.2.5",
"css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.1",
"open-browser-webpack-plugin": "^0.0.5",
"react-addons-pure-render-mixin": "^15.4.2",
"react-addons-shallow-compare": "^15.4.2",
"react-hot-loader": "^1.3.1",
"react-tap-event-plugin": "^2.0.1",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.0",
"transform-runtime": "^0.0.0",
"webpack": "^2.3.1",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
"redux": "^3.6.0"
}
}

react开发的更多相关文章

  1. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  2. React开发项目例子

    一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...

  3. Atom编辑器之加快React开发的插件汇总

    汇总下比较实用的atom插件[偏react开发的]-- 博主发现这个还是比较全面的! atom-react-autocomplete–项目内,组件名及状态的自动补全  autocomplete-js- ...

  4. 用Inferno代替React开发高性能响应式WEB应用

    什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...

  5. vsCode工具做react开发,几个常用插件

    一.环境准备: 1.下载安装VSCode,Node.js,Yarn 2.打开命令行终端或powershell,输入yarn global add create-react-app安装react的脚手架 ...

  6. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  7. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  8. 【React】使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  9. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  10. react 开发 PC 端项目(一)项目环境搭建 及 处理 IE8 兼容问题

    步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...

随机推荐

  1. APICloud常用模块

    常用模块 基础 fs db 支付 wxPay aliPay unionPay 消息 ajpush rongCloud2

  2. 【java学习笔记】反射基础

    一.反射 反射就是在剖析一个类,了解这个类的构造,创建这个类对应的对象. Class 代表字节码的类,代表类的类 Field 代表属性的类 Method 代表方法的类 Constructor 代表构造 ...

  3. android自定义Notification通知栏实例

    项目有个需求,需要在发送Notification的时候动态给定url的图片.大概思路如下:自己定义一个Notification的布局文件,这样能够很方便设置View的属性. 首先加载网络图片,使用Bi ...

  4. spring schedule定时任务(一):注解的方式

    我所知道的java定时任务的几种常用方式: 1.spring schedule注解的方式: 2.spring schedule配置文件的方式: 3.java类继承TimerTask: 第一种方式的实现 ...

  5. AM335x(TQ335x)学习笔记——触摸屏驱动编写

    前面几篇文章已经通过配置DTS的方式完成了多个驱动的移植,接下来我们解决TQ335x的触摸驱动问题.由于种种原因,TQ335x的触摸屏驱动是以模块方式提供的,且Linux官方内核中也没有带该触摸屏的驱 ...

  6. freemarker自定义标签报错(五)

    freemarker自定义标签 1.错误描述 六月 05, 2014 11:40:49 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严 ...

  7. xml的SAX解析和dom解析的区别

    一,区别 DOM解析 SAX解析 原理: 一次性加载xml文档,不适合大容量的文件读取 原理: 加载一点,读取一点,处理一点.适合大容量文件的读取 DOM解析可以任意进行增删改成 SAX解析只能读取 ...

  8. MySQL中information_schema数据库的内容

    大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个information_schema数据库. information_schema数据库是做什么用的呢,使用WordPress博客 ...

  9. 小程序for循环中通过index实现单个点击事件

    <!--xml--> <view class='content3-list' wx:for="{{listItems}}" > <view class ...

  10. Ubuntu出现ERR_PROXY_CONNECTION_FAILED错误解决方案

    我是Ubuntu新手,因为想查看国外的资料,然后安装了灯笼,结果打开谷歌浏览器出现了ERR_PROXY_CONNECTION_FAILED错误,未连接到互联网,代理服务器出现错误,然后Firefox也 ...