目錄如下：
1.新建一個文件夾0107（*文件夾名自定*）? ?cd 進(jìn)入0107
2,執(zhí)行cnpm?install??webpack??webpack-cli?--save-dev
3,執(zhí)行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.最后執(zhí)行npx webpack --mode development
8.在index.html直接打開即可
***溫馨提示***
如果項目中有“...”報錯的， “... state ”報錯解決方法如下：
在webpack.config.js中加入
plugins: ['transform-object-rest-spread']?
如圖所示???：
并執(zhí)行 cnpm install babel-plugin-transform-object-rest-spread --save
