webpack4 的热加载

引用：webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware

• webpack-dev-server

1. vi webpack.config.js

const path = require('path');
...


module.exports = {
...
   devServer: {
       contentBase: path.resolve(__dirname, './dist'),
       host: '192.168.0.247',
       compress: true,
       port: 8888,
       historyApiFallback: true,
   }
...
}

注：historyApiFallback可以保证类似http://localhost:8885/aaaaaaaaaaa的请求返回跟http://localhost:8885/一样的页面，这样才能用同一个js根据路径的不同去往不同的路由

2. vi package.json

{
...
 "scripts": {
...
   "debug": "webpack-dev-server --mode development"
...
 }
}

3. 效果
   这种方式的热更新会刷新页面，对react来说，其React Tool插件是有效的
   

• webpack-dev-middleware、webpack-hot-middleware

• html-webpack-plugin

自动生成html
html-webpack-plugin