因网上大多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. shell脚本学习（1）列出一组IP内所有活动主机

    1.用ping命令编写脚本来查询一组IP地址同时检查他们是否处于活动状态 [zhi@centos7 ~]$ vi CheckHostStatus.sh [zhi@centos7 ~]$ ll 总用量 ...

  2. PHP : 封装跳转函数，实现三个页面的跳转

    具体实现:有a,b两个页面,一个跳转页面c,在a执行完后先进行c页面的提示,再跳转到b 1.文件设计: 2.c页面封装方法内容(function.php): a页面内容(a.html): a页面的后台 ...

  3. 用yum rpm 快速安装zabbix agent

    用yum 快速安装zabbix agent. wget http://repo.zabbix.com/zabbix/3.4/rhel/7/x86_64/zabbix-agent-3.4.2-1.el7 ...

  4. April 9 2017 Week 15 Sunday

    In the evening one may praise the day. 入夜方能赞美白昼. I think that could be understand in different ways, ...

  5. MySQL入门很简单: 5 索引

    1. 索引的含义和特点 索引:创建在表上,是对数据库表中一列或多列的值进行排序的一种结构. 存储类型: B性树(BTREE)索引和哈希(HASH)索引: InnoDB和MyISAM支持BTREE索引, ...

  6. 在jupyter notebook 中同时使用安装不同版本的python内核-从而可以进行切换

    在安装anaconda的时候,默认安装的是python3.6 但是cs231n课程作业是在py2.7环境下运行的.所以需要在jupyter notebook中安装并启用python2.7版本 方法: ...

  7. 【转】Android开发学习总结(一)——搭建最新版本的Android开发环境

    最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是一直没有搭建开发环境去学习,Android的更新速度比较快了,Android1. ...

  8. prepareStatament和Statement和callableStatement的区别

    关系与区别 Statement.PreparedStatement和CallableStatement都是接口(interface) Statement 1.Statement接口提供了执行语句和获取 ...

  9. mysql随机字符串函数

    drop function if exists rand_str; delimiter $$ ) charset 'utf8' begin # 定义接收初始化类型 ) ; # 定义初始化数字 ) '; ...

  10. 2.初识CronTrigger

    开发工具:Eclipse 代码下载链接:https://github.com/theIndoorTrain/QuartzDemo.git 前言: 在1.初始Quartz里面,我们介绍了quartz的一 ...