《前端》使用webpack+vue从零开始打造前端项目(2020最新版)六--热模块替换HMP、SourceMap--bilibili-2021年2月7日

一、视频p24 7-2 业务代码实现

在app.vue 中写业务代码：

<template>
    <div>
        <h1> is App </h1>
        <input type="text" v-model="content"/>
        <button @click="addtodo()">添加</button>
        <ul>
            <li v-for="(i,index) of todo" :key="index">{{i}}</li>
        </ul>
    </div>
</template>
<script>
import img from  './assets/img/1.png'
import './assets/styles/text.css'
// import './assets/styles/global.styl'
export default {
    name:'App',
    data(){
        return{
            todo:["todo1","todo2","todo3","todo4"],
            content:'',
        }
    },
    methods:{
        addtodo(){
            if(this.content==null) return
                this.todo.push(this.content);
                this.content="";
        },
    }
}
</script>
<style lang='stylus' scoped>
h1
    color:red
li:nth-of-type(odd) //隔行变色
    color :blue
</style>

二、HMP 演示

文档：https://www.webpackjs.com/guides/hot-module-replacement/

1、启用 HMR

需要更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。我们还要删除掉 print.js 的入口起点，因为它现在正被 index.js 模块使用。

2、插件

操作如下：

3、测试

注意：因为我们修改了webpack的配置，所以要终止现在正在运行的项目（ctrl+C），重新执行start命令。

三、SourceMap

https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-source-map

SourceMap：（源代码映射）建立打包后的文件和源代码所在行的映射。

主要作用：在开发时快速定位到出错的源代码行。

问题还原：我们在前台看到的代码是打包编译过的，如果有代码错误，F12之后，定位不到错误代码行。

 

解决：devtool

建议在开发环境中使用改功能，使用cheap-eval-source-map，正式环境不使用，none。

    mode:'production',//生产环境
    // mode: 'development',//开发环境

文档：https://www.webpackjs.com/configuration/devtool/