webpack-启动热更新

搭建好webpack配置之后，开始启动热更新。

第一步：安装 webpack-dev-server 注意版本问题

npm install webpack-dev-server  --save-dev

第二步：在webpack.config.js 进行插件启用

var webpack = require('webpack');
/** 省略 **/
// 插件
plugins:[
   // 热更新
   new webpack.HotModuleReplacementPlugin()
]

第三步：设置端口号

方法一：在package.json中设置端口号
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --port 8080"      
  }

方法二：在webpack.config.js中设置端口号
devServer: {
   inline: true,
   port: 3000
},

第四步：设置启动

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --port 8080"      
  }

第五步：打开设置的端口连接：

http://localhost:8080/

 

展示的就是index文件得到的内容。