因网上大多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. 笨办法学Python（九）

    习题 9: 打印,打印,打印 # Here's some new strange stuff, remember type it exactly. days = "Mon Tue Wed T ...

  2. Js arguments.callee();函数自己调用自己

    1.阶乘的时候,函数一般要用到递归算法,所以函数内部一定会调用自身 //递归,阶乘 function sum(num){ ) { ; } else{ ); //自己调用自己,递归 } } alert( ...

  3. mybatis怎样自动生成java类，配置文件？

    其实没有什么东西是可以自动生成的,只不过是别人已经写好了,你调用罢了. 所以想要mybatis自动生成java类,配置文件等,就必须要一些配置和一些jar包.当然这些配置也很简单. 为了有个初步的认识 ...

  4. 广搜破解密码(HDU1195)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1195 解题报告: #include<iostream> #include<cstdi ...

  5. assert函数和捕获异常

    assert函数: C语言和C++都有一个专为调试而准备的工具函数,就是 assert()函数. 这个函数是在C语言的 assert.h 库文件里定义的,所以包含到C++程序里我们用以下语句: #in ...

  6. linq 和 lmabda 表达式 的用法 和优劣 转自 农码一生

    https://www.cnblogs.com/zhaopei/p/5746414.html

  7. python非字符串与字符产链连接

    第一种办法: "hello" +' '+str(110) 输出结果: 'hello 110' 第二种办法: import numpy x = 110 print 'hello(%d ...

  8. Linux内存管理 - buddy系统

    本文目的在于分析Linux内存管理机制中的伙伴系统.内核版本为2.6.31.1. 伙伴系统的概念 在系统运行过程中,经常需要分配一组连续的页,而频繁的申请和释放内存页会导致内存中散布着许多不连续的页, ...

  9. 微信小程序开发：禁止输入表情的控制，验证方法，光标控制

    <input class="weui-input" name="receiptMan" maxlength="10" bindinpu ...

  10. 即将开始的python之路

    准备开始学py 记录一下 加油