webpack按官方文档配置了，但热更新无效

目录

一、问题

二、解决方法

三、总结

---

tiips:如嫌繁琐，直接移步总结即可！

一、问题

1.开发的时候每次修改代码都要 手动刷新，真的很麻烦，要手动操作而且因为全局刷新需要等待较长的时间，所以希望使用webpack的局部热更新来解决这个问题，但是根据网上的配置操作了，webpack打包的项目还是无法更新。

前置操作：

1）安装了webpack webpack-dev-server依赖

 npm install webpack webpack-dev-server --save-dev

2)webpack配置：

 devServer:{ hot:true} //开启热更新

3)css热更新：配置 style-loader,对于vue项目可以配置 vue-style-loader

      {
        test: /\.css$/,
        use: [
          isProd
            ? MiniCssExtractPlugin.loader
            : {
                loader: 'vue-style-loader'
              },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              esModule: false
            }
          }
        ]
      },

4)vue文件热更新：配置 vue-loader

      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader'
        }
      },

附：使用的webpack-dev-server版本：3.11.0  ；webpack:5.17.0

二、解决方法

1.按道理按照上面的方法配置一遍后，应该可以热更新了，但是并没有生效。

2.看了别人的项目可以用，无奈一个个属性尝试，最后发现是因为  webpack配置中没有配置 target属性导致的。配置中添加 target:'web'就可以实现热更新了，如图2-1，打印了热更新开启日志。

图2-1

3.官方文档去看target属性：target是说明当前项目的构建目标。有browserslist配置则默认值为'browserslist';没有browserslist配置，则默认值为'web'.

4.我这个项目有browserslist,所以target:'browserslist' ;但是为什么 默认值为 'browserslist不能开启热更新呢？我也不知道@——@

三、总结

1.问题是解决了，在其他配置完成后热更新仍不生效，可以尝试配置 target:'web'

2.但是吧，我真的不知道为什么这样子做是可以的。官方文档也没有写必须加这个配置项热更新才生效；网上搜了也没有找到热更新和target配置有关的文章@——@

3.啊，知其然不知其所以然。有大佬知道原因的，欢迎告知，非常感谢！

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/