最终效果:
配置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.jsimport React from "react";import ReactDOM from "react-dom";import App from "./App.js";ReactDOM.render( ???<App></App> ???, ???document.getElementById("app"));//App.jsimport 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)
原文地址：https://www.cnblogs.com/hijushen/p/10615960.html