无法实现Webpack热模块替换

Question

我已成功设置了 WebPack - 它可以编译我的 Babel 和 SCSS 文件，也可以正常运行监视功能。但我也想使用热模块替换 - 我在实现时遇到了困难。当我在浏览器中加载开发服务器时，它显示 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>

有人有什么想法吗？

- Alastair

---

你不能将webpack-dev-server的懒惰模式与HMR结合使用。懒惰模式只在HTTP请求时重新编译。HMR依赖于在更改时重新编译的观察者。请改用 lazy: false，或者省略它。 - Tobias K.

我已经发布了一个关于HMR如何工作以及需要做什么才能使其工作的简要说明：https://dev59.com/_pbfa4cB1Zd3GeqPxrZg#37022884 - Johannes Ewald

Answer 1

如果您全局安装了webpack-dev-server，即执行 npm install webpack-dev-server -g ，请尝试将其本地安装（只需移除选项 -g）。

我通过这种方式解决了这个问题。

- syfee

---

似乎 --hot 选项正在本地查找某些文件。也许有一种方法可以表明它们是全局安装的。因为在本地和全局安装 dev-server 感觉很奇怪。 - yves amsellem

@yvesamsellem 我猜这个问题与 webpack-dev-server 如何确定项目的基本目录有关。我查看了文档，发现该实用程序公开了一个 --content-base 选项来覆盖默认设置。无论如何，将其安装为本地 devDependency 应该是保持跨平台一致性的首选方法。 - Evan Plaice

Answer 2

---

重要提示

---

如果您正在使用 [e-mail]，请确保您安装了

webpack-dev-server@2.0.0-beta 

仅仅运行npm install webpack-dev-server可能无法很好地与webpack 2兼容。这可能只在版本2仍处于beta阶段时才是真的。

---

我也曾为此苦苦挣扎，因为这个主题的文档非常零散。找到了这个简单的工作示例:

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

代码相当不言自明。

- Dieter Gribnitz

Answer 3

我遇到了类似的问题，通过在本地安装webpack解决了这个问题。为了将webpack作为本地开发依赖项安装，请执行以下操作：npm i -D webpack

- thiagodebastos