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开发环境,如果还不熟悉的童鞋可以看一 ...
随机推荐
- CSS input type="number"出现上下箭头时解决方案
input type="number"时录入内容不可控制,解决方案是在css中添加//火狐input[type=number] { -moz-appearance:tex ...
- docker中执行sed: can't move '/etc/resolv.conf73UqmG' to '/etc/resolv.conf': Device or resource busy错误的处理原因及方式
错误现象 在docker容器中想要修改/etc/resolv.conf中的namesever,使用sed命令进行执行时遇到错误: / # sed -i 's/192.168.1.1/192.168.1 ...
- hdfs文件系统架构详解
hdfs文件系统架构详解 官方hdfs分布式介绍 NameNode *Namenode负责文件系统的namespace以及客户端文件访问 *NameNode负责文件元数据操作,DataNode负责文件 ...
- OpenGL的配置与搭建
一.项目中所使用的OpenGL扩展库有: 1. freeglut-3.0.0 2. glew-2.0.0 3. glm-0.9.7.3 二.添加扩展库文件 在工程项目文件夹里面添加OpenGLExte ...
- 使用jersey 注解包扫描类PackageNamesScanner
Jersey 中自带一个包扫描,可以是包,或者具体类名 ,扫描的类型是自己定注解类型,实现功能更加大,可以是jar 包 可以是虚拟地址下的 Jersey 主要用来扫描Path Provider 类中同 ...
- __main() 和 main() 【转】
因为我们通常在BOOTLOADER中都已做好了比较细致的初始化工作,包括代码的搬运,所以我们最好别再调用库函数__main(),因为__main()作为ADS集成好的库函数,会对系统进行初始化设置,可 ...
- Sqlserver事务备份和还原实例
create database mydb use mydb go create table account( id ), name ), balance float ) go select * fro ...
- maven项目打包发布时跳过测试
mvn命令: mvn clean install -Dmaven.test.skip=true eclipse build... 命令: clean install -Dmaven.test.skip ...
- Pivot Table系列之切片器 (Slicer)
1. 遇到的问题: 在Excel中,用PivotTable来做数据报告展示: 问题1:在同一个Sheet页里,多个PivotTable如何实现同步刷新? 问题2:在不同Sheet页之间,多个Pivot ...
- oracle高级查询（实例基于scott用户四张表）
oracle高级查询(实例基于scott用户四张表) 分组查询 多表查询 子查询 综合实例 ====================================================== ...