官方的快速安装
npx create-react-app my-app
cd my-app
npm start
可以用来练习，不过不是基于webpack的，不太推荐
配置基于webpack的开发环境
首先按装需要的包
npm init
npm i webpack -D
npm i webpack-cli -D
npm i style-loader -D
npm i css-loader -D
npm i babel-core -D
npm i babel-loader@7 -D
npm i babel-preset-es2015 -D
npm i babel-preset-react -D
npm i react -S
npm i react-dom -S
npm i webpack-dev-server -D
新建webpack.config.js，在里面写webpack配置
var path=require("path")
var webpack=require("webpack")
var HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
mode:"development",
entry:"./src/index.js",
output:{
path:path.resolve(__dirname,"./dist"),
filename:"bundle.js"
},
module:{
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]},
{
test:/\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: { presets: ["react","es2015"] }
}],
},
]
},
plugins:[
new HtmlWebpackPlugin({
template:"src/index.html",
filename:"index.html"
}),
]
}
打开package.json文件，配置script
"scripts":{
"bulid":"webpack",
"dev":"webpack-dev-server --open"
}
文件结构
新建src和dist文件夹，在src里新建index.html和index.js
编写HelloWorld
编写index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
编写index.js
import React,{Component} from "react"
import ReactDOM from "react-dom"
class App extends Component{
render(){
return(<h1>Hello World</h1>)
}
}
ReactDOM.render(
<App />,
document.getElementById("root")
)
在控制台输入
npm run dev
会自动打开浏览器，显示页面
