求助:webpack5 devtools影响vue-loader的热重载

各位大佬好,本人在做一个仿哔哩哔哩的PC网站。为了实现多html入口的打包,自己搭建基于webpacker5加vue-loader的脚手架来实现前端工程化。

问题描述

在搭建脚手架和测试时发现一个问题:开发环境下为了定位错误代码和进行源码调试设置webpack的devtools选项为相关的source ma配置类型后,vue-loader默认开启的hot reload,在html模板内容更新后,热重载无法有效工作;关闭devtools后,问题得到解决。

vue-loader热重载的演示参考官方中文站点的热重载小节。

工程配置

现将webpack的配置进行最简化,来演示下问题。

简化的工程结构:

package.json

json 复制代码
{
  "name": "test-webpack-vue",
  ...
  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.config.js",
    "build": "webpack --config ./webpack.config.js"
  },
  ...
  "devDependencies": {
    "html-webpack-plugin": "^5.6.0",
    "vue-loader": "^17.4.2",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"
  },
  "dependencies": {
    "vue": "^3.4.19"
  }
}

webpack.config.js

js 复制代码
const path = require("path");
const htmlPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    entry: path.join(__dirname, "./src/app.js"),
    mode: 'development',
    // 这一行会影响vue-loader的热重载
    // devtool: 'inline-source-map',
    devServer: {
        open: false,
        hot: true,
        port: 8080
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                exclude: /node_modules/,
                use: 'vue-loader'
            }
        ],
    },
    plugins: [
        new htmlPlugin({
            template: path.join(__dirname, "./src/index.html"),
        }),
        new VueLoaderPlugin()
    ],
};

功能代码

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue热重载演示</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

打包入口js:app.js

js 复制代码
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

app.mount('#app')

App.vue

html 复制代码
<template>
  <div>
    <h2>hello!{{ a }}</h2>
    <input v-model="b" />
    <button @click="add">add</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const a = ref(1)
setInterval(() => {
  a.value++
  if (a.value === 15) {
    // debugger
    // throw Error('报错了...')
  }
}, 1000)
const b = ref(10)
const add = () => {
  b.value += 2
}
</script>
<style></style>

演示环节

具体演示:

先注释掉webpack.config.js中的devtools设置,vue-loader热重载有效:

放开debug部分的代码,来演示vue文件中报错的情况,发现无法调试,报错的代码也无法定到位源代码文件:

为此,放开webpack.config.js中的devtools设置,再次调试,ok:

但与此同时,vue-loader的热重载不起作用了!!

在我改了html模板后,数据也被重置了,vue热重载失败!

问题求助

所以我的疑问是,webpack的devtools设置会影响vue-loader的热重载功能吗,如果是这样,机制是啥,又怎么解决这个问题呢?这样在开发环境既能享受vue的热重载来提高开发效率又能准确定位和调试代码错误,这多好啊!求助大佬~~

相关推荐
速易达网络25 分钟前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding5 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景6 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘6 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)7 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中7 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi8 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X8 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112349 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js