webpack-dev-server+vue-loader 热重载只重载一次

Question

问题描述

在app.vue文件修改代码时可以重载生效一次，后面再次修改保存时修改并没有生效，刷新页面也没用，只能通过重新开启webpack-dev-serve服务。

以下是我个人觉得可能出现问题的某个原因

我有注意到第一次成功热重载编译完成里会包含runtime modules这行提示以及它处理的路径，在失败的热重载里编译完成时并没有包含runtime modules这行提示

版本

webpack: 5.72.1
webpack-cli: 4.9.2
webpack-dev-server 4.9.0

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
// const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, '../src/main.js'),
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, '../dist'),
    publicPath:'http://localhost:1000/'
  },
  target: "web",
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 1000,
    liveReload:true
  },
  plugins: [
    new HtmlWebpackPlugin({ 
      template: path.resolve(__dirname, '../public/index.html')
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../public'),
          to: path.resolve(__dirname, '../dist'),
          globOptions: {
            ignore: ['**/index.html'],
            gitignore: false,
            dot: true
          }
        }
      ]
    }),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [{ test: /\.css$/, use: ['vue-style-loader', 'css-loader',] }, {
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [[
            "@babel/plugin-transform-runtime",
            {
              "corejs": 3
            }
          ]]
        }
      }
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
    ]
  }
}

package.json

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config build/webpack.config.js",
    "serve": "cls & webpack-dev-server --hot --config ./build/webpack.config.js",
    "debug": "node --inspect-brk build/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/runtime-corejs3": "^7.18.3",
    "autoprefixer": "^10.4.7",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "core-js": "^3.22.7",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "vue": "^3.2.33",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/plugin-transform-runtime": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@babel/runtime": "^7.18.3",
    "babel-loader": "^8.2.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "css-loader": "^6.7.1",
    "postcss": "^8.4.14",
    "postcss-loader": "^7.0.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.6.14",
    "webpack-dev-server": "^4.9.0"
  }
}

Answer 1

检查一下导入组件的时候组件名大小写是否正确，组件名是RealtimeCard，导入的时候如果写为

import RealtimeCard from '@/components/realtimeCard'

则会引起只重载一次的问题。
不要问我为什么知道...