一分钟搭建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 ...
随机推荐
- WPF 多线程
写法3 private void button1_Click(object sender, RoutedEventArgs e) { System. ...
- Exception in thread "main" java.lang.NoClassDefFoundError: com/google/common/collect/Maps
加入jar包 http://jarfiles.pandaidea.com/google.collect.html google-collect-1.0.jar.zip ( 504.8 KB )
- 【转】开发者分享如何创造一款优秀的iOS游戏——2013-08-25 17
http://game.dapps.net/gamedev/experience/889.html 创造出<Temple Run>的夫妻团队在高峰时期每天能够获得"好几万&quo ...
- iOS中的imageIO与image解码
ImageIO对外开放的对象有CGImageSourceRef.CGImageDestinationRef,不对外开放的对象有CGImageMetadataRef.CoreGraphics中经常与im ...
- JavaScript实现回到顶部
HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...
- 怎么在AptanaStudio中把电脑中的浏览器设置为默认执行方法
1.在Aptana中找到按钮 2.点击向下的三角形找到
- [Form Builder]内置函数execute_trigger、do_key详解
转:http://yedward.net/?id=82 1.execute_trigger:用来运行一个指定的触发器,常用来运行用户自定义的触发器. 语法:procedure execute_trig ...
- [Form builder]:about SYSTEM.MESSAGE_LEVEL
If you want to suppress error messages then you have to set a system variable :system.message_level. ...
- Web网站与Web应用程序区别
创建时的目录结构不同. WEB应用程序一般处理程序有命名空间,而网站中的没有.(因为应用程序最后要编译成一个DLL文件,会产生命名冲突,而网站每个页面会编译成每一个的DLL,不会文件内产生全名冲突). ...
- java.lang.NoClassDefFoundError: com.nostra13.universalimageloader.core.DisplayImageOptions$Builder
今天在使用Universal-image-loader开源插件的时候,一直出现了这么个错误.原因是在ADT22版本中导入jar包的方式不对. 正确的导入jar包方式: 在adt17的版本之后,导入第三 ...