各位大佬好,本人在做一个仿哔哩哔哩的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的热重载来提高开发效率又能准确定位和调试代码错误,这多好啊!求助大佬~~