一分钟搭建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 ...
随机推荐
- js 复制网页内容，兼容各浏览器
因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用. 方法如下: function copyURL(){ var clipBoardContent=&q ...
- SQLite数据库如何存储和读取二进制数据
SQLite数据库如何存储和读取二进制数据 1. 存储二进制数据 SQLite提供的绑定二进制参数接口函数为: int sqlite3_bind_blob(sqlite3_stmt*, int, co ...
- maven 通过nexus创建工厂的配置
访问中央工厂的地址:http://localhost:8081/nexus/index.html#welcome admin.admin123 查找到自己配置的maven仓库的位置,编辑setti ...
- 从a站点跳转到b站点，通过url的参数判断是否让该用户选择身份
一.问题的由来 问题是这样子给出来,今天产品那边跟我说,在a网站跳转到b网站时,让用户有一个选择身份的弹窗.因为公司有两个不同站点,你无论在a或者b网站注册后,都可以随便登录这两个站点,进入之后都会有 ...
- spring4使用websocket
看到spring4的介绍上说已经支持websocket了,尝试了一下之后各种坑,不如servlet简单,写篇文章来讲解一下自己遇到的坑. 环境:tomcat8+spring4.1.6+jdk8+ngi ...
- 运行时动态修改webconfig
网站运行时,如果直接手动修改webconfig.xml,会造成线程池重启,对于PV大的网站来说风险是很大的,并且如果有多台服务器,逐台修改也会造成数据不一致. .NET 2.0后可以通过代码修改web ...
- Splay Tree的删除操作
Splay Tree的插入操作,搜索操作,和删除操作都实现了,那么就能够使用来解题了. 指针的删除操作的处理还是那么难的,非常多坎须要避开. 同一个坎还是坑了我好多次,就是指针传递的问题,什么时候须要 ...
- PERCONA-TOOLKIT : pt-ioprofile分析IO情况
针对IO密集型应用做系统调优的时候,我们通常都需要知道系统cpu 内存 io 网络等系统性能 和 使用率,结合应用本身的访问量,以及 mysql的性能指标来综合分析.比如说:我们将系统压力情况分为 ...
- Java出现No enclosing instance of type E is accessible. Must qualify the allocation with an enclosing--转
原文:http://blog.csdn.net/sunny2038/article/details/6926079 最近在看Java,在编译写书上一个例子时,由于书上的代码只有一部分,于是就自己补了一 ...
- spring quartz的触发器CrontriggerBean配置
每一个quartz的CronTrigger表达式分为七个子表达式,每个子表达式之间用空号分割,分别是:秒 分 时 日 月 星期 年.其中年不是必须的,所以CronTrigger最少有六个子表达式. 每 ...