Webpack 5实时重载

Question

我将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',
  };
};

- Nikolay Shebeko

Answer 1

你需要在Webpack配置中设置{target: 'web'}，并确保按照以下方式运行开发服务器：webpack serve --mode development --env development

- Farid

---

谢谢Farid。我在网上搜了很久，这是唯一对我有效的解决方案。 - PenguinBlues

请关注此问题以获取根本原因和错误状态：https://github.com/webpack/webpack-dev-server/issues/2758 - Chuanqi Sun

Answer 2

只有当Webpack bundle的目标是'web'时，Live Reload才能起作用。因此，将以下代码添加到webpack.config文件中即可实现：

target: 'web'

然而，就目前来说，在webpack-dev-server@3中存在一个bug，当target是包含“web”的数组时，会阻止实时重新加载：

https://github.com/webpack/webpack-dev-server/pull/3271

所以你不能这样做：

target: ['web', 'es5']

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

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

- Roey

Answer 3

我在官方文档中找到了这个解决方案： devserverwatchfiles 使用 devServer.watchFiles

此选项允许您配置要监视文件更改的glob/目录/文件列表。

例如：

webpack.config.js

module.exports = {
  //...
  devServer: {
    watchFiles: ['src/**/*'],
  },
};

- Kirilo Lozitsky

Answer 4

我曾经遇到过同样的错误，以下是解决方法：

第一步

在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
    }}

- Ismail

Answer 5

我曾经遇到了与webpack-dev-server v4.8.1相同的问题，这个方法对我有效：-

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    open:true,
    compress: true,
    port: 9000,
    hot:false
 },

- Eric Mahare

Answer 6

我遇到了一个类似的问题，即实时重新加载“不起作用”：webpack会检测到我的代码更改，但当它重新加载页面时，旧版本的UI仍然显示。我的开发服务器配置如下：

  devServer: {
    port: 8080,
    hot: true,
    static: {
      directory: path.join(__dirname, "public"), 
    },
    liveReload: true,
    watchFiles: [ path.join(__dirname, 'src/**/*') ]
  },

然后我将“cache”选项设置为false（在devServer选项之外），它就起作用了：

cache: false,

由于某些原因，浏览器一直保留着我的代码缓存版本，即使我进行了更改并在更改后重新加载。然而，我有另一个具有完全相同的webpack配置的项目，它可以正常工作而无需将缓存设置为false，因此这可能不是最佳解决方案，因为它可能会导致在较大的项目中构建时间变慢。但它确实完成了任务。

- Ethan Phelps

Answer 7

我不确定这是否与您的问题相关，但是您正在使用哪个版本的webpack-cli？ 一些人报告说由于webpack-cli v4.0.0，导致 webpack-dev-server出现了此问题：

错误：无法找到模块'webpack-cli / bin / config-yargs'＃2759

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

- kofeigen

Answer 8

我遇到了与以下版本相关的问题：

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" } ```

在 package.json 文件中添加以下代码： ``` "start": "webpack serve" ```

- Иван Власов

Answer 9

我曾经遇到过同样的错误。这是我解决它的方法。

1. 添加 { target: 'web' }
2. 添加 { devServer: { hot: false, watchContentBase: true }}
3. 移除 { devServer: { historyApiFallback: true }}
4. 结果：

module.exports = {
  mode: 'development',
  target: 'web',
  entry: './src/app/main.ts',
  output: {
    path: paths.dist,
    filename: 'js/main.min.js?[fullhash]',
  },
  devServer: {
    open: true,
    overlay: true,
    contentBase: paths.dist,
    port: 8080,
    host: '0.0.0.0',
    hot: false,
    watchContentBase: true,
  }
}

开始脚本：

"scripts": {
  "dev": "webpack serve --mode development",
}

开始命令：

 npm run dev

我的默认浏览器会自动打开 http://localhost:8080

当我编辑我的 pug 文件时，我可以在浏览器中看到结果。

- Dmitriy Shkredov

---

watchContentBase 仅在 webpack V4 中可用，在文档中找不到它，并且当我尝试在 webpack.config.js 中使用它时会抛出错误。 - Josh Martin

Answer 10

对于webpack 5，您需要在应用程序源代码所在的路径中添加静态密钥

devServer: {
    open: true,
    hot: true,
    static: {
      directory: path.join(__dirname, "src"),
    },
  },

- Muneeb Ejaz