webpack 提示 Uncaught Error: [HMR] Hot Module Replacement is disabled

最新推荐文章于 2024-07-17 19:00:27 发布

夜猫的兔子

最新推荐文章于 2024-07-17 19:00:27 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：问题打包工具文章标签： webpack

本文链接：https://blog.youkuaiyun.com/G_wendy/article/details/81948634

问题同时被 2 个专栏收录

3 篇文章

订阅专栏

打包工具

2 篇文章

订阅专栏

本文详细介绍了Webpack配置中Hot Module Replacement (HMR)的使用方法及常见问题解决思路。通过具体示例展示了如何在开发环境中启用HMR，并针对未渲染问题进行了解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack打包完成页面未渲染出来提示：Uncaught Error: [HMR] Hot Module Replacement is disabled

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isDev =process.env.NODE_ENV === 'development'

const config = {
  target:'web',
  entry:path.join(__dirname,'src/index.js'),
  output:{
    filename:'bundle.[hash:5].js',
    path:path.join(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        loader:'vue-loader'
      },
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },
      {
        test:/\.styl/,
        use:[
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      },
      {
        test:/\.(jpg|png|gif|jpeg|svg)$/,
        use:[
          {
            loader:'url-loader',
            options:{limit:1024,name:'[name]-[hash:5].[ext]'}
          }
        ]
      }
    ]
  },
  plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env':{
        NODE_ENV: isDev ? '"development"' :'"production"'
      }
    }),
    new HTMLWebpackPlugin()
  ]
}


if(isDev){
  config.devServer = {
    port: 8000,
    host:'0.0.0.0',
    overlay:{
      error:true,
    }
  }
}

module.exports = config

plugins里添加

plugins:[

new webpack.HotModuleReplacementPlugin(),

]