React开发环境搭建（react,babel,webpack webpack-dev-server)
最终效果:
配置webpack 自动编译脚本， 内容更改后浏览器页面自动刷新，提高效率。 主要靠webpack 的watch 功能。
npm 全局安装的包： webpack webpack-cli webpack-dev-server.
项目内2个文件 package.json. webpack.config.js 配置如下。截图不是最简单结构， 后面增加redux, react-redux 包加了点东西。
需要建立这样的目录后， npm install 就会根据package.json安装项目需要的包。 而根据webpack.config.js 就会自动运行。 详细的东西不再介绍， 专题学习更加稳妥。
目录结构：
//webpack.config.js 配置文件
const path = require('path');
module.exports = {
entry: "./www/app/main.js", //入口文件
output: { //出口文件
path: path.resolve(__dirname, "www/dist"), //打包到哪个文件夹中
filename: "bundle.js", //打包到哪个文件
publicPath : "/xuni"
},
watch : true,
mode: "development",
module : {
rules: [
{
test: /\.js$/, //以.js结尾的文件
include: [
path.resolve(__dirname, "www/app") //包括什么文件夹
],
exclude: [
path.resolve(__dirname, "node_modules") //不包括
],
loader: "babel-loader",
options: {
presets: ["env","react"]
}
}
]
}
}
1 //package.json 文件。
2
3 {
4 "name": "react-0327",
5 "version": "1.0.0",
6 "description": "",
7 "main": "index.js",
8 "scripts": {
9 "dev": "webpack-dev-server --content-base ./www --port 8080"
10 },
11 "author": "",
12 "license": "ISC",
13 "devDependencies": {
14 "babel-core": "^6.24.1",
15 "babel-loader": "^7.1.4",
16 "babel-preset-env": "^1.7.0",
17 "babel-preset-react": "^6.24.1"
18 },
19 "dependencies": {
20 "react": "^16.8.5",
21 "react-dom": "^16.8.5"
22 }
}
需要注意的引入babel-loader 后。 相应高低版本问题， 出现问题， 根据提示即可解决。 譬如本例用到env, react 2个babel loader. 是比较新的版本， 如果用babel-present-es2015 则是低版本支持， 根据提示搜索即可解决问题。
根据webpack的配置。 在index.html 引入js 文件方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="xuni/bundle.js"></script>
</body>
</html>
入口Main.js 和组件App.js 分别为：
//main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(
<App></App>
,
document.getElementById("app")
);
//App.js
import React from "react";
export default class App extends React.Component{
constructor(){
super();
}
render(){
return <div> <h1>React 第一步 </h1></div> } } 参考：
http://https://www.valentinog.com/blog/react-webpack-babel/
https://www.cnblogs.com/chenziyu-blog/p/5675086.html
React开发环境搭建（react,babel,webpack webpack-dev-server)的更多相关文章
- 1. React介绍 React开发环境搭建 React第一个程序
什么是 React React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景 Faceboo ...
- 基于webpack的react开发环境搭建新手教程
最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...
- es6开发环境搭建，babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- react开发环境搭建
---恢复内容开始--- 要想用react,需要安装: 1)babel-sublime: 作用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示. 安装步骤: ...
- 详解 Webpack+Babel+React 开发环境的搭建
1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...
- Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- 搭建 webpack、react 开发环境（二）
配置处理样式文件 到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...
- 搭建 webpack、react 开发环境（一）
基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...
- 搭建 webpack、react 开发环境（三）
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
随机推荐
- C#/对线程的认识
1.线程的优点和缺点,以及什么时候来考虑使用线程.多线程可以使得程序响应更快,程序在进行其他任务的同时,线程也处于活动状态.当前没有处理任务的时候,可以把处理器的时间让给其他任务可以随时停止任务可以设 ...
- django学习：一些疑惑
昨天学习了django的第二天,有一些收获. django的语法很严谨,看上去明明对齐的,但是他却提示说缩进不一致.后来我把前面的空全部删除,全部采用空格,这样就通过了,看样子还是要编程有一个好习惯, ...
- css ——行级元素与块级元素解析
一 . 先说说二者的本质区别吧: 行级元素是可以和其他元素处于一行,不用必须另起一行.块级元素是每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 二 .下面 ...
- Vue2.5学习路线及基础知识总结。
在接触新技术不了解时,我喜欢去慕课网上看新手教程,在学习vue时,在慕课网上看了几个老师的视频,发现这挺好,讲到挺详细的,适合新手,有兴趣的可以先看一下,vue2.5入门教程. 然后在学习路上看见了一 ...
- FixedUpdate（）使用
当MonoBehaviour启用时,其 FixedUpdate在每一帧被调用. 处理Rigidbody时,需要用FixedUpdate代替Update.例如:给刚体加一个作用力时,你必须应用作用力在F ...
- Calling Circles(UVa 247)(Floyd 算法)
用Floyd算法求出传递闭包,然后用dfs求出每条连通分量.注意其中用到的几个小技巧: #include<cstdio> #include<iostream> #include ...
- python 多线程共享全局变量的问题
多线程都是在同一个进程中运行的.因此在进程中的全局变量所有线程都是可共享的. 这就造成了一个问题,因为线程执行的顺序是无序的.有可能会造成数据错误. 直白理解:也就是多线程执行的时候,同时对一个全局变 ...
- poj 1113 凸包
#include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...
- vue项目打包后的资源路径问题
最近做的vue项目,本地测试完成后,build上线,却发现了文件路径问题,提示各种诸如js,css等资源找不到的错: 正确解决方式有两种,一种是绝对路径配置,详细可以网上查,个人推荐第二种相对路径,这 ...
- 20175202 《Java程序设计》迭代和JDB
一.任务详情 二.设计过程的问题及解决 1.程序编译时一直提示编译出现错误. 原因及解决:本以为声明对象和创建对象一起进行时,可以直接采用如zhubajie = new Xiyoujirenwu(); ...