因网上大多React + webpack快速搭建的运行不起来，便自行写了一个。在搭建开发环境的前需安装nodejs，npm。

新建一个工作目录，比如叫reactdome，在reactdome目录中运行命令npm init；这里可以全部按enter执行，直到执行完毕，执行完毕后将会自动生成package.json文件。在package.json文件中配置如下代码：

{

  "name": "",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "dev": "webpack-dev-server --hot --progress --colors",

    "build": "webpack --progress --colors"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.0.20",

    "babel-loader": "^6.0.1",

    "babel-preset-es2015": "^6.0.15",

    "babel-preset-react": "^6.0.15",

    "css-loader": "^0.25.0",

    "react": "^15.3.2",

    "react-css-modules": "^4.0.3",

    "react-dom": "^15.4.0",

    "react-router": "^3.0.0",

    "style-loader": "^0.13.1",

    "webpack": "^1.13.3",

    "webpack-dev-server": "^1.16.2"

  }

}

里面的文件都是必须的，后期需要其他的可自行添加安装更多。

package.json文件配置完毕，执行npm install命令即可（我有翻墙，如果安装有问题可自行百度找阿里镜像安装npm）。

在reactdome文件夹中新建webpack.config.js文件，里面配置对应代码

var path = require('path');

var webpack = require('webpack');

module.exports = {

	entry: [

		'webpack/hot/dev-server',

		path.resolve(__dirname, './app/index.js')

	],

	output: {

		path: path.resolve(__dirname, './build'),

		filename: 'bundle.js',

	},

  module: {

    loaders: [

      {

        test: /\.jsx?$/,

        loader: 'babel-loader',

        exclude: /node_modules/,

        query: {presets: ['es2015', 'react'] }

      }

    ]

  },

  resolve: {

    extensions: ['','.js', '.jsx'],

  }

};

在reactdome文件里面新建一个index.htm文件，文件代码如下：

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>reactdome</title>

  </head>

  <body>

    <div id="content"></div>

    <script src="bundle.js"></script>

  </body>

</html>

在reactdome文件里面新建一个app文件夹，app文件夹中新建一个index.js的文件，代码如下：

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('content')

);

文件代码目录如下：

全部执行配置完毕之后，运行命令：npm run dev，打开浏览器输入http://localhost:8080/就可以运行你的代码了。

配置的过程中可能因为版本等问题不能正常执行，可回退到对应的稳定版本。good luck~

React + webpack 快速搭建开发环境的更多相关文章

  1. 二、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  2. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  3. Sublime Text3下如何快速搭建开发环境

    安装好Sublime Text3之后,简单几步就可以搭建一个好用的开发环境. sublime的设置包括自定义设置以及插件系统. 打开菜单Preferences -> Settings,编辑自定义 ...

  4. React Native 之 搭建开发环境

    现在只能在MAC系统上安装. 1. 首先,HomeBrew 这是一个包管理库,用来下载其它工具. 打开网站:brew.sh 网页有个命令 /usr/bin/ruby -e "$(curl - ...

  5. ubuntu环境下快速搭建开发环境

    接触ubuntu已经半年了,虽然游戏啊qq啊在linux下配置稍微麻烦一些,但是作为开发环境,ubuntu真的是好东西,无论是c啊还是php and etc 看到官网上文档开发环境建议wamp,如果是 ...

  6. ubuntu系统快速搭建开发环境

    1.免密登陆 1.1 原理 ssh协议中用到了对称加密和非对称加密,如果不了解可以百度一下,原理引用一下这篇博客 在ssh中,非对称加密被用来在会话初始化阶段为通信双方进行会话密钥的协商.由于非对称加 ...

  7. React Native IOS搭建开发环境

    安装 必须的软件 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/mast ...

  8. 深入浅出Docker（五）：基于Fig搭建开发环境

    概述 在搭建开发环境时,我们都希望搭建过程能够简单,并且一劳永逸,其他的同事可以复用已经搭建好的开发环境以节省开发时间.而在搭建开发环境时,我们经常会被复杂的配置以及重复的下载安装所困扰.在Docke ...

  9. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 目的: 由于我想在一台电脑上同时开发IOS和Android两 ...

随机推荐

  1. Linux远程桌面（二）

    上一篇远程桌面采用的独立服务配置不适用于过多用户,这一篇采用超级Internet服务器搭建vnc服务可以解决多用户问题.  vnc之xinetd服务搭建配置 Linux远程桌面(一):vnc之独立服务 ...

  2. 【转载】#336 - Declaring and Using a readonly Field

    You can make a field in a class read-only by using the readonly modifier when the field is declared. ...

  3. IOS 设置颜色的的详情

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  4. 问题 C: B C++时间类的运算符重载

    题目描述 C++时间类的运算符重载 定义一个时间类Time,其数据成员为表示时间的小时(hour).分(minute),秒(second). 重载运算符“+”,使之能用于时间对象的加法运算:重载运算符 ...

  5. AI-Info-Micron-Insight：V2X 自主性：帮助减少事故、排放和交通拥堵

    ylbtech-AI-Info-Micron-Insight:V2X 自主性:帮助减少事故.排放和交通拥堵 1.返回顶部 1. V2X 自主性:帮助减少事故.排放和交通拥堵 一辆汽车冲到你的车道上.晚 ...

  6. 第5章 什么是寄存器—零死角玩转STM32-F429系列

    第5章     什么是寄存器 集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/firege 本章参考资料 ...

  7. multi-view datasets

    http://rll.berkeley.edu/2014_ICRA_dataset/ http://rgbd-dataset.cs.washington.edu/dataset/

  8. js循环读取json数据，将读取到的数据用js写成表格

    ①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...

  9. ubuntu安装jdk6

    我的ubuntu版本是12.04的64位的.由于ubuntu官方没有更新最新版的jdk6,所以我们只能主动去oracle公司网站去下载.网站地址:http://www.oracle.com/techn ...

  10. （排班表一）使用SQL语句使数据从坚向排列转化成横向排列

    知识重点: 1.extract(day from schedule01::timestamp)=13 Extract 属于 SQL 的 DML(即数据库管理语言)函数,同样,InterBase 也支持 ...