Webpack 5 实时重载

Posted 2023-02-22

【中文标题】Webpack 5 实时重载

【英文标题】：Webpack 5 live reload

【发布时间】：2021-02-05 00:13:00

【问题描述】：

我将 webpack 4 更新到 webpack 5，之后一切正常，除了更新浏览器（实时重新加载），谁能说出原因？这是我的配置。

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');

module.exports = (env, argv) => 
  const  mode = 'development'  = argv;
  const isProd = mode === 'production';
  const isDev = mode === 'development';

  const getStyleLoaders = () => 
    return [isProd ? MiniCssExtractPlugin.loader : 'style-loader'];
  ;
  return 
    context: path.resolve(__dirname, 'src'),
    mode: isProd ? 'production' : isDev && 'development',
    entry: './index.js',
    output: 
      path: path.resolve(__dirname, 'dist'),
      filename: isDev ? 'script/script.js' : 'script/bundle-[hash:8].js',
      publicPath: '/',
    ,
    resolve: 
      extensions: ['.js'],
    ,
    devServer: 
      contentBase: path.join(__dirname, 'dist'),
      publicPath: '/',
      open: true,
      watchContentBase: true,
      port: 8080,
    ,
    devtool: isProd ? false : 'source-map',
  ;
;

【参考方案1】：

你需要在你的 Webpack 配置中设置 target: 'web' 并确保像这样运行你的开发服务器：webpack serve --mode development --env development

【讨论】：

感谢法里德。我一直在网上搜索，这是唯一对我有用的解决方案。

关注此问题的根本原因和错误状态：github.com/webpack/webpack-dev-server/issues/2758

【参考方案2】：

只有当 webpack 包的目标是 'web' 时，live reload 才会起作用， 所以将这一行添加到 webpack.config 将使其工作：

target: 'web'

不过，在编写本文时，webpack-dev-server@3 中存在一个错误，当目标是包含“web”的数组时，它会阻止实时重新加载： https://github.com/webpack/webpack-dev-server/pull/3271

所以你不能这样做：

target: ['web', 'es5']

也许可以使用这种解决方法...

target: isProduction ? ['web', 'es5'] : 'web'

【参考方案3】：

我不确定这是否与您的问题有关，但是您使用的是哪个版本的 webpack-cli？由于 webpack-cli v4.0.0，一些人报告了 webpack-dev-server 的这个问题：

Error: Cannot find module 'webpack-cli/bin/config-yargs' #2759

如果您遇到此问题，您可以尝试将 webpack-cli 降级到版本：3.3.0（精确）和 webpack-dev-server 降级到版本： ^3.11.0.

【参考方案4】：

我遇到了同样的问题 webpack v5.39.0, webpack-cli v4.7.2 webpack-dev-server v3.11.2 我的方式：

npm install -D webpack-dev-server@4.0.0-beta.0

module.exports =target: "web" 在配置中

和 "start": "webpack serve" 在 package.json 中

【参考方案5】：

我有同样的错误，这是修复它的原因：

第一

在 Webpack 配置中设置 target: 'web'

秒

在 devServer 配置集下： publicPath: "/assets/",

我的配置将：

    module.exports = 
    target: “web”,
    entry: 
    main: path.resolve(__dirname, “./src/index.js”)
    ,
    output: 
    path: __dirname + “/dist/assets”,
    filename: “bundle.js”,
    publicPath: “assets”
    ,
    mode: “development”,
    devServer: 
    open: true,
    contentBase: “./dist”,
    publicPath: “/assets/”,
    port: 3000,
    hot: false,
    watchContentBase: true