解决使用webpack搭建vue3脚手架，对vue进行dll打包引入报错__VUE_HMR_RUNTIME__ is not defined

概览

升级脚手架，引用新版本，以前运行得好好的代码总会报错。当我把以前使用webpack4+vue2搭建的脚手架拿出来升级的时候，问题就来了。以前使用dll将vue打包引入，目的是提高编译速度减少打包体积。当我把vue2升级到vue3，项目启动起来。页面白板，打开控制台发现有错误输出：

原因分析

VUE_HMR_RUNTIME 跟模块热替换有关系。从vue2升级到vue3的同时也会升级vue-loader,vue-loader支持模块热替换，但是经过dll打包之后的代码不再支持，导致这个变量找不到

解决方法

• 权衡利弊，看模块热替换重要，还是dll提升那点编译速度更重要。个人倾向于热模块替换，它能有效提升开发效率。
• 配置vue-loader，关闭热替换

 {
    test: /\.vue/,
    exclude: /node_modules/,
    include: path.resolve(__dirname, "../src"),
    use: [
      {
        loader: "vue-loader",
        options: { hotReload: true }
      },
    ],
 },