React.js--3代码的实时更新并自动运行

1.配置webpack-dev-server,在命令行中输入命令cnpm i webpack-dev-server -D

2.在package.json中将"dev": "webpackr"修改为 “dev”: "webpack-dev-server “
2.输入命令npm run dev

3.将index.html中的script标签中的…/dist去掉,这样index.js中的代码如果修改，在浏览器中就可以实时更新

4.输入命令npm run dev

5.将"dev": "webpack-dev-server“改为：
“dev”: “webpack-dev-server --open --port 3001 --hot --host 127.0.0.2”
6.输入命令npm run dev
这里可以发现浏览器可以自动打开刚刚需要的页面

7.导入在内存中自动生产index.html的插件
第一步：在命令行输入：cnpm i html-webpack-plugin -D
将webpack.config.js中修改为

const path = require(‘path’)
const HtmlWebPackPlugin = require(‘html-webpack-plugin’)//导入在内存中自动生成index页面的创建

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(__dirname,’./src/index.html’),//源文件
filename:‘index.html’//生成的内存中首页的名称
})
//向外暴露一个打包的配置对象，因为webpack是基于node构建的
//所以webpack支持所有的node API和语法
module.exports ={
mode: ‘development’,//developmemnt production
//在webpack4.x中，有一个很大的特性，就是约定大于配置，默认的打包
//路径：src ->index.js
plugins: [
htmlPlugin
]
}

8.并且将<script src=’./main.js><script》删掉

最后在命令行输入npm run dev即可，最终完成自动打开