一分钟搭建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 ...
随机推荐
- C#如何检测一个字符串是不是合法的URL
C#如何检测一个字符串是不是合法的URL using System.Text.RegularExpressions; /// <summary> /// 检测串值是否 ...
- java 5 ReadWriteLock
import java.util.ArrayList; import java.util.List; import java.util.concurrent.locks.ReadWriteLock; ...
- Safari浏览器Session问题
Safari浏览器中经常出现session无法写入或同一个会话中Session ID常变动的事情.尤其以iOS7版本居多. 问题本身并不难猜,应该就是cookie无法写入引起的.奇怪的是,部分同版本的 ...
- Java NIO与IO的差别和比較
导读 J2SE1.4以上版本号中公布了全新的I/O类库.本文将通过一些实例来简介NIO库提供的一些新特性:非堵塞I/O,字符转换,缓冲以及通道. 一. 介绍NIO NIO包(java.nio.*)引入 ...
- ant有什么用
内容摘要: ANT是一个基于Java的自动化脚本引擎,脚本格式为XML.除了做Java编译相关任务外,ANT还可以通过插件实现很多应用的调用. 1)ANT的基本概念: 2)ANT的安装:解包,设置路径 ...
- 加速Android Studio/Gradle构建
已经使用Android Studio进行开发超过一年,随着项目的增大,依赖库的增多,构建速度越来越慢,现在最慢要6分钟才能build一个release的安装包,在网上查找资料,发现可以通过一些配置可以 ...
- Mac系统Safari浏览器启动无图模式
有的时候我们用热点上网,图片的出现会消耗大量的流量,这时候就需要启动无图模式不加载图片. 步骤:启动Safari浏览器->偏好设置->高级->勾选“在菜单栏中显示“开发”菜单”-&g ...
- Android_life,Intent_note
生命周期: 从出生到死亡 Activity生命周期的7个方法和3个循环 onCreate() 创建时调用onRestart() 不可见到可见时调用onStart() 用户可见时调用onResume() ...
- Apache Commons Beanutils对象属性批量复制(pseudo-singleton)
Apache Commons Beanutils为开源软件,可在Apache官网http://commons.apache.org/proper/commons-beanutils/download_ ...
- wampserver修改mysql密码后phpmyadmin登陆错误处理方法
首先针对wampserver这个软件来说,是很方面的! 在进行使用时都会涉及到关于mysql数据管理系统的相关密码的修改,这个当然修改是很简单,当时没有想那么多,想为自己的mysql添加一个密码,方式 ...