近日自己项目遇到需要用webpack搭建react环境，查了挺多 ，自己总结一下

1.下载安装最新版node.js（https://nodejs.org/en/）

2.主要看自己网络情况，可以选择安装淘宝镜像去搭建环境

npm config set registry http://registry.npm.taobao.org/

3.通过npm/cnpm全局安装webpack, Babel, Webpack-dev-server：

npm install babel webpack webpack-dev-server -g

4.选择项目存放目录，用npm init 初始化 npm 项目

5.在项目中安装 react, react-dom

npm install react react-dom --save

6.在项目中安装 Babel 转换器，这里用到插件 babel-preset-react, babel-preset-latest，latest 即最新的 ES 规范，包括了 Async/Await 这些新特性。

npm install babel-loader babel-core babel-preset-react babel-preset-latest --save

7.创建项目文件，main.js 即项目入口文件，App.js 即 React 组件主文件

文件目录最终为：

8.配置webpack，编辑webpack.config.js

module.exports = {

    entry: './main.js', // 入口文件路径

    output: {

        path: '/',

        filename: 'index.js'

    },

    devServer: {

        inline: true,

        port:

    },

    module: {

        loaders: [

            {

                test: /\.js$/, // babel 转换为兼容性的 js

                exclude: /node_modules/,

                loader: 'babel-loader',

                query: {

                    presets: ['react', 'latest']

                }

            }

        ]

    }

}

9.写index.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>React Hello World</title>

</head>

<body>

<div id="app"></div>

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

</body>

</html>

写App.js：

import React from 'react';

class App extends React.Component {

    render() {

        return <div>Hello World!</div>

    }

}

export default App

写Main.js：

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

10.配置 npm scripts, 编辑 package.json，在"scripts"属性处添加一行：

"scripts": {

   "start": "webpack-dev-server"

},

11.基本的框架搭建完毕，npm start 然后打开 http://localhost:3333 试试：

npm start

webpack+react搭建环境的更多相关文章

  1. react --- 搭建环境

    搭建react开发环境的准备工作 1. node.js 稳定版本 2. 安装cnpm,用cnpm代替npm 3. 用yarn替代npm yarn的安装:npm install -g yarn 搭建re ...

  2. 从零开始搭建webpack+react开发环境

    环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...

  3. 搭建 webpack + React 开发环境

    说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...

  4. Webpack+React+ES6 最新环境搭建和配置（2017年）

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

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

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

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

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

  7. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  8. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  9. Webpack笔记（二）——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

随机推荐

  1. window.onload的加载和$(document).read()

    1.执行时机: window.onload :必须等到网页中所有的内容加载完之后才执行. $(document).read():网页中所有的DOM结构执行完毕后.可能DOM元素并未加载完. 2.单个网 ...

  2. P2727 Stringsobits

    01串 Stringsobits 题目背景 考虑排好序的N(N<=31)位二进制数. 题目描述 他们是排列好的,而且包含所有长度为N且这个二进制数中1的位数的个数小于等于L(L<=N)的数 ...

  3. Agile&DevOps究竟谁是魔法棒

    天下没有神奇的配方 很抱歉,文章的开头我就要说出这个残酷的事实 - 世界上没有任何工具可以魔法般的让你实现敏捷,精益,DevOps.如果只是依赖了工具的自动化,实现了自动化Dev或者Ops,那么别忘了 ...

  4. 【hibernate 初探】之 关系映射，ORM

    从整理上讲,一个ORM框架(以hibernate为例)所涉及内容无非就是,如何映射,如何检索,还有事务处理.所以从这三方面入手,基本上可以保证将hibernate可以用到自己的项目之中.所以我先说一下 ...

  5. Hibernate框架 主配置文件（Hibernate.cfg.xml） 映射配置 说明

    Hibernate.cfg.xml 主配置文件中主要配置:数据库连接信息.其他参数.映射信息! 常用配置查看源码: hibernate-distribution-3.6.0.Final\project ...

  6. Kinect 常用识别手势

    以下手势能被流畅的识别: ◎RaiseRightHand / RaiseLeftHand – 左手或右手举起过肩并保持至少一秒 ◎Psi –双手举起过肩并保持至少一秒 ◎Stop – 双手下垂. ◎W ...

  7. babel如此简单

    凡是看到这个标题点进来的同学,相信对babel都有了一定的了解.babel使用起来很简单,简单到都没有必要写一篇文章去介绍,直接看看官方文档就可以.所以我也在怀疑到底该不该写这篇文章.想来想去还是决定 ...

  8. mysql主从数据库设置备忘

    [mysqld] binlog-do-db = databasename1 binlog-do-db = databasename2 binlog-do-db = databasename3 -- 且 ...

  9. 使用jersey 注解包扫描类PackageNamesScanner

    Jersey 中自带一个包扫描,可以是包,或者具体类名 ,扫描的类型是自己定注解类型,实现功能更加大,可以是jar 包 可以是虚拟地址下的 Jersey 主要用来扫描Path Provider 类中同 ...

  10. DL4NLP——词表示模型（一）表示学习；syntagmatic与paradigmatic两类模型；基于矩阵的LSA和GloVe

    本文简述了以下内容: 什么是词表示,什么是表示学习,什么是分布式表示 one-hot representation与distributed representation(分布式表示) 基于distri ...