无法让 webpack 热模块更换工作答案

【问题标题】：Can't get webpack hot module replacement to work无法让 webpack 热模块更换工作
【发布时间】：2025-12-21 15:35:11
【问题描述】：

我已经成功设置了 WebPack - 它可以很好地编译我的 babel 和 SCSS 文件，并且我的 watch 功能可以正常工作。但我也想使用热模块更换 - 我很难让它继续下去。当我在浏览器中加载开发服务器时，它显示Cannot resolve module 'webpack/hot/dev-server'。我的配置如下所示：

import webpack from 'webpack';
import wpServer from 'webpack-dev-server';

var compiler = webpack({
    entry: [
        './src/core.js',
        'webpack/hot/dev-server'
    ],
    output: {
        path: outPath,
        filename: '[name].js'
    },
    resolveLoader: { root: path.join(MODULE_PATH, "node_modules") },
    module: {
        loaders: [
          { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
          { test: /\.scss$/, loader: "style!css!sass" }
        ]
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    watch: true
});

var server = new wpServer(compiler, {
    contentBase: outPath,
    hot: true,
    quiet: false,
    noInfo: false,
    lazy: true,
    filename: "main.js",
    watchDelay: 300,
    headers: { "X-Custom-Header": "yes" },
    stats: { colors: true },
});
server.listen(8080, "localhost", function() {});

我的 index.html 包含：

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src='main.js'></script>

有人有什么想法吗？

【问题讨论】：

您不能将 webpack-dev-server 惰性模式与 HMR 结合使用。惰性模式仅在 HTTP 请求时重新编译。 HMR 依赖于根据变化重新编译的观察者。请改用lazy: false 或直接省略它。
我已经发布了关于 HMR 的工作原理以及使其工作所需的内容的简短说明：*.com/questions/37016683/…

标签： webpack webpack-dev-server

【解决方案1】：

我遇到了类似的问题。我通过在本地安装 webpack 本身来修复它。将 webpack 安装为本地开发依赖项： npm i -D webpack

【讨论】：

【解决方案2】：

重要

如果您使用的是 webpack@2.x.x.beta，请确保安装

webpack-dev-server@2.0.0-beta

只运行npm install webpack-dev-server 不会很好用 webpack 2.

这可能只有在第 2 版仍处于测试阶段时才适用。

由于有关此主题的文档非常分散，因此我也很难使其正常工作。

找到了这个简单的工作示例：

https://github.com/ahfarmer/webpack-hmr-starter-dev-server-api

代码很容易解释。

【讨论】：

【解决方案3】：

如果您全局安装了webpack-dev-server，即npm install webpack-dev-server -g，请尝试在本地安装它（只需删除选项-g）。

我通过这样做解决了这个问题。

【讨论】：

看来--hot 选项正在本地寻找一些文件。也许有一种方法可以说它们是全局安装的。导致在本地和全局安装 dev-server 感觉很尴尬。
@yvesamsellem 我认为这个问题与webpack-dev-server 如何确定项目的基本目录有关。我检查了文档，看起来该实用程序公开了一个 --content-base 选项来覆盖默认值。无论哪种方式，将其安装为本地 devDependency 应该是保持跨平台一致性的首选方法。