webpack+react搭建环境
近日自己项目遇到需要用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搭建环境的更多相关文章
- react --- 搭建环境
搭建react开发环境的准备工作 1. node.js 稳定版本 2. 安装cnpm,用cnpm代替npm 3. 用yarn替代npm yarn的安装:npm install -g yarn 搭建re ...
- 从零开始搭建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 ...
- 搭建 webpack + React 开发环境
说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- 使用Yarn+Webpack+Babel6搭建React.js环境
使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
随机推荐
- flask 上传头像
上传头像,自己感觉了好久,就是上传文件呗其实,存在一个路径,数据库存储这个路径,然后展示给前端,啥都不说,看怎么实现的. 数据库设置如下 user_image=db.Column(db.String( ...
- Spring Security 概念基础 验证流程
Spring Security 概念基础 验证流程 认证&授权 认证:确定是否为合法用户 授权:分配角色权限(分配角色,分配资源) 认证管理器(Authentication Manager) ...
- php 时间戳转化成天数 四舍五入 整数
public function edit() { global $_W; global $_GPC; $openid=$_W['openid']; $boards = pdo_fetchall('se ...
- Unrooted Tests错误
使用Junit4做测试,遇到如下问题: 条件如下: Eclipse里的Maven工程. 使用JUnit4(这个是否必须不知,反正我的工程用的4) 修改某个Test类里的方法名,或者增加一个Test方法 ...
- Java虚拟机：内存模型详解
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 我们都知道,当虚拟机执行Java代码的时候,首先要把字节码文件加载到内存,那么这些类的信息都存放在内存中的哪个区域呢?当我们创建一个对象实 ...
- nopCommerce 3.9 大波浪系列 之 引擎 NopEngine
本章涉及到的内容如下 1.EngineContext初始化IEngine实例 2.Autofac依赖注入初始化 3.AutoMapper框架初始化 4.启动任务初始化 一.EngineContext初 ...
- USB基础知识
Q: USB是什么? A: USB是通用串行总线(Universal Serial Bus)的缩写. Q: USB的优点有哪些? A: ① 支持热插拔:(hot-plugging或Hot Swap)即 ...
- js实现日期显示的一些操作
1.js获取当前日期(yyyy-mm-dd) 以下代码是获取到的当前日期: var myDate = new Date(); var year = myDate.getFullYear(); //获取 ...
- Spring Data JPA在Spring Boot中的应用
1.JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.他的出现主要是为了简 ...
- (转)递归算法的时间复杂度终结篇与Master method
开篇前言:为什么写这篇文章?笔者目前在学习各种各样的算法,在这个过程中,频繁地碰到到递归思想和分治思想,惊讶于这两种的思想的伟大与奇妙的同时,经常要面对的一个问题就是,对于一个给定的递归算法或者用分治 ...