Question

怎样实现react的热加载

需要怎样配置才能实现react组件的热加载啊？比如我修改了一个react组件，然后希望应用程序能自动重新编译，浏览器能自动刷新看到组件的变化？需要做哪些配置。我用的是webpack3版本

Answer 1

安装webpack-dev-server 

网页链接

npm install webpack-dev-server -D

webpack.config.js添加

module.exports = {
   // 前面配置省略
   devServer: {
       port: 8080, // 设置端口号
       open: true, // 自动打开,
       hot: true, // 热替换
       contentBase: './public' // 指定页面目录,
       historyApiFallback: { // 设置默认首页
           index: 'index.html'
       }
   } 
}

package.json 的scripts里添加一个

"start-dev-server": "webpack-dev-server"

追问

peerDependencies WRNING要紧么？我需不需要安装webpack4抑或是将webpack-dev-server版本降级，比如安装2版本？？?

Answer 2

plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin()],devServer: { contentBase: './dist', colors: true, noInfo: true, historyApiFallback: true, inline: true, hot: true, quiet: true}

追问

你好，请问要实现我说的这个功能devServer是必选项吗？就是一定要用devServer吗？它在这里面的扮演的角色是什么，都有哪些职能？