feat:webpack 新增热更新无效解决方案

984507092 · Nov 19, 2024 · 639c068 · 639c068
1 parent e35a34c
commit 639c068
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/docs/view/blogs/webpack/6.webpack3升级webpack5(一).md b/docs/view/blogs/webpack/6.webpack3升级webpack5(一).md
@@ -17,7 +17,7 @@ title: webpack3升级webpack5
 主要和 `webpack3` 的配置区别就是几个依赖弃用和新的依赖支持
 
 <div class="c-blue mb-1">
-ExtractTextPlugin, OptimizeCSSPlugin, UglifyJsPlugin => MiniCssExtractPlugin, CssMinimizerPlugin ,TerserWebpackPlugin 
+ExtractTextPlugin, OptimizeCSSPlugin, UglifyJsPlugin => MiniCssExtractPlugin, CssMinimizerPlugin ,TerserWebpackPlugin
 </div>
 
 <div class="c-blue mb-1">
@@ -26,7 +26,7 @@ VueLoaderPlugin 的添加
 </div>
 
 <div class="c-blue mb-1">
-.postcssrc.js => postcss.config.js 
+.postcssrc.js => postcss.config.js
 </div>
 
 这些后面配置文件里都会贴，找不同改下就好了
@@ -101,9 +101,9 @@ VueLoaderPlugin 的添加
 
 从  `.postcssrc.js` 换成 `postcss.config.js`
 
-### 3. `config` 文件修改 
+### 3. `config` 文件修改
 
-#### `index.js` 文件 中修改了 <span class="c-red">devtool</span> `webpack5` 中修改了 <span class="c-red">devtool</span> 的值 ，我这边使用了 <span class="c-red">eval-cheap-module-source-map</span> 
+#### `index.js` 文件 中修改了 <span class="c-red">devtool</span> `webpack5` 中修改了 <span class="c-red">devtool</span> 的值 ，我这边使用了 <span class="c-red">eval-cheap-module-source-map</span>
 
 ``` js
 "use strict";
@@ -451,6 +451,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
       ],
     },
+
     hot: true,
     contentBase: false,
     compress: true,
@@ -465,6 +466,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       poll: config.dev.poll,
     }
   },
+  target: 'web', //webpack5的HMR热更新不起作用 在webpack中配置target: 'web'就可以了
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env')
@@ -898,8 +900,6 @@ module.exports = function () {
 
 ```
 
-
-
 另外推荐几个我参考的博客
 
 <a class="cursor-pointer" target="_blank" href="https://blog.csdn.net/sugerinaflat/article/details/120996095">vue2 webpack3 升级 webpack5 全过程，内附详细配置文件</a>