使用webpack搭建react
目录如下：
1.新建一个文件夹0107（*文件夹名自定*） cd 进入0107
2,执行cnpm install webpack webpack-cli --save-dev
3,执行cnpm install -D babel-loader@7 babel-core babel-preset-es2015 babel-preset-env babel-preset-react react react-dom --save-dev
4.新建文件webpack.config.js
***************webpack.config.js具体代码如下：***************
const path = require('path');
module.exports = {
entry:"./app/main.js",
output:{
path:path.resolve(__dirname,"dist"),
filename:"bundle.js"
},
module:{
rules:[
{
test:/\.jsx?$/,
include:[
path.resolve(__dirname,"app")
],
exclude:[
path.resolve(__dirname,"node_modules")
],
loader:"babel-loader",
options:{
presets:['es2015','react']
}
}
]
},
watch:true
}
5.新建一个index.html
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
6.新建文件夹app，以及app文件夹下的子文件App.js和main.js
App.js 代码如下：
import React from "react"
export default class App extends React.Component{
constructor(props){
super(props)
}
render(){
return <div>
<h1>我爱你{5000*2}年</h1>
</div>
}
}
main.js 代码如下：
import React from "react"
import ReactDOM from "react-dom"
import App from "./App.js"
ReactDOM.render(
<App></App>,
document.getElementById("box")
)
7.最后执行npx webpack --mode development
8.在index.html直接打开即可
***温馨提示***
如果项目中有“...”报错的， “... state ”报错解决方法如下：
在webpack.config.js中加入
plugins: ['transform-object-rest-spread']
如图所示☞☞☞：
并执行 cnpm install babel-plugin-transform-object-rest-spread --save
