webpack中的热模块替换

说明：模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。本页面重点介绍实现，而概念页面提供了更多关于它的工作原理以及为什么它有用的细节

1) 启用
i 配置

devServer: {
// 指定服务器根目录
contentBase: './dist',
// 自动打开浏览器
open: true,
// 启用热模块替换
hot: true
},

ii 插件

2) 测试
编写业务代码App.vue
示例：

<template>
  <div>
    <h1>TODO-LIST</h1>
    <div class="list">
      <input type="text" v-model="content"/>
      <button @click="addlist">提交</button>
      <ul>
        <li v-for="(item,index) of todolists" :key="index">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
//import img from './assets/images/bg.jpg'
/*import './assets/images/unChecked.svg'
import './assets/styles/test.css'*/
import "./assets/styles/global.styl";
export default {
  name: "App", //组件的名称
  data(){
      return {

      todolists:["todo1","todo2","todo3"],
      content:""
       }
  },
  methods:{
      addlist(){
          if(this.content==="") return 
          this.todolists.push(this.content);
          this.content=""
      }
  }
};
</script>

<style scoped>
h1 {
  color: red;
}
.list ul li:nth-child(2n) {
  color: green;
}
</style>

• 修改样式颜色, 发现之前添加的内容依然存在