因网上大多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. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  2. graphql 后台服务项目架构(一)

    基础知识 简而言之,GraphQL 是一种描述如何请求数据的语法,通常用于客户端向服务器请求数据.GraphQL 有三个主要特点: 允许客户端精确指定所需数据. 可以更容易地从多个数据源聚合数据. 使 ...

  3. ARM实验3 ——串口实验

    uart串口实验 实验内容: 编写UART模块程序,通过串口将信息打印到终端. 实验目的: 熟悉开发环境的使用. 掌握exynos4412处理器的UART功能. 实验平台: FS4412开发板,ecl ...

  4. Nagios监控ActiveMQ插件开发和部署注意事项

    前提,监控服务器是Ubuntu14 操作系统.被监控服务器是RHEL6.5 RHEL7 1.自定义插件可以使用bash.python等脚本来实现. 2.通过nrpe插件来实现监控服务器和被监控主机之间 ...

  5. framework7中一行的字如果过多就省略号显示的CSS写法

    .order-info-title { text-overflow: ellipsis !important; white-space: nowrap !important; overflow: hi ...

  6. NYOJ(42)欧拉图

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=42 我是参考了红黑联盟的结题报告了的.但是有一个位置,应该是红黑联盟写错了吧,就是那个连通 ...

  7. CORS跨域限制以及预请求验证

    之前我们可以通过“Access-Control-Allow-Origin”,实现跨域请求,那是不是所有跨域请求都可以通过设置Access-Control-Allow-Origin实现跨域请求呢?显然不 ...

  8. Javascript入门笔记1-script标签

    1.script标签在HTML文件中添加JavaScript代码. JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript ...

  9. 使用Hbuild打包APP

    前端开发APP,从HBuilder开始~   内容简介 介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~ 无所不能的js 最开始js仅仅局限于网页上一些效果, ...

  10. 【图论 思维】cf715B. Complete The Graph加强

    zzq讲的杂题 题目大意 有一张$n​$个点$m​$条边的简单正权无向图,$S​$到$T​$的最短路为$L​$,现在有一些边的边权未知,请输出任意一种满足题意的方案. $n,m\le 500000​$ ...