最近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'));

 

最后在根目录下敲命令npm install,安心等待就ok,不过有很大的可能部分模块安装失败,比如node-sass,比较顽固,需要反复安装多次。

如果实在安装不成功,就直接下载http://pan.baidu.com/s/1bnYgWgv。

一分钟搭建Webpack+react+es6框架的更多相关文章

  1. Webpack+React+ES6 最新环境搭建和配置(2017年)

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  2. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  3. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  4. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  5. webpack + react + es6, 并附上自己碰到的一些问题

    最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...

  6. webpack学习(六)—webpack+react+es6(第3篇)

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  7. webpack学习(六)—webpack+react+es6(第2篇)

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  8. webpack学习(五)—webpack+react+es6(第1篇)

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  9. 搭建 webpack + react 框架爬坑之路

    由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...

随机推荐

  1. jbpm4.4 demo2

    package cn.itcast.b_processdefinition; import java.io.FileInputStream; import java.io.FileOutputStre ...

  2. 【转】解决Cannot change version of project facet Dynamic web module to 2.5

    http://blog.csdn.net/steveguoshao/article/details/38414145 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact I ...

  3. MySQL批处理SQL语句

    MySQL 支持批处理的模式运行一批SQL语句,以下的样例就是实验MySQL怎样在windows下批处理运行SQL语句. create table test(id int,name varchar(2 ...

  4. Android代码中动态设置图片的大小(自动缩放),位置

    项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...

  5. SECURITY_ATTRIBUTES 设置低权限

    Windows 从 Vista 開始又一次改动了其系统的权限管理机制,于是如今就会碰到一些 xp 能过而 win7 不能过的代码.比方 Service 程序和一般应用程序用共享内存的方式来通讯,Cre ...

  6. dmesg 程序崩溃调试

    [root@localhost log]# cat -n /root/xx.c #include <stdio.h> void func(char *p) { *p = 'p'; } in ...

  7. (原创)speex与wav格式音频文件的互相转换

    我们的司信项目又有了新的需求,就是要做会议室.然而需求却很纠结,要继续按照原来发语音消息那样的形式来实现这个会议的功能,还要实现语音播放的计时,暂停,语音的拼接,还要绘制频谱图等等. 如果是wav,m ...

  8. MAC地址查询 Linux/Unix操作系统mac地址怎么查

    Linux/Unix操作系统熟悉的人都通常是用console命令控制台来进行相应的操作.  Linux/Unix操作系统查看网卡mac地址的方法可以通过以下命令获得: 1.ifconfig -a 2. ...

  9. sizeof strlen strncpy用法总结 结构体实际所占内存大小 以及memset用法

    sizeof测类型(数组名除外) strlen测实际长度 strncpy返回指针类型 #include <stdio.h> #include <stdlib.h> #inclu ...

  10. what is delta simulation time

    In digital logic simulation, a delta cycles are evaluation of expressions, followed by value updates ...