我可以使用 webpack 的热模块替换但不使用 react 吗？答案

【问题标题】：Can I use hot module replacement with webpack but not use react?我可以使用 webpack 的热模块替换但不使用 react 吗？
【发布时间】：2015-09-30 03:33:33
【问题描述】：

我尝试使用热模块更换，但从未成功。然后我找到了这个repository，它可以很好地使用热模块更换。而且它使用了一个 react-hot 加载器，如果我删除这个加载器，我会得到错误：

[HMR] Cannot find update. Need to do a full reload!

我根据上面的仓库调整了我的项目，但是我没有使用react，所以我没有使用react-hot loader，所以我总是得到上面的错误。

我可以在 webpack 中使用热模块替换但不使用 react 吗？或者我只需要一个 xx-hot loader 来使其热模块可更换？

我的结构：

src
    entry.js
index.html
server.js
webpack.config.js

index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script src="/static/bundle.js"></script>
    </body>
</html>

entry.js：

document.write('hello');

server.js：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    console.log(err);
  }

  console.log('Listening at localhost:3000');
});

webpack.config.js：

var path = require("path");
var webpack = require('webpack');

module.exports = {
    devtool: 'eval',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        "./src/entry.js"
    ],
    output: {
        path: path.join(__dirname, "build"),
        publicPath: '/static/',
        filename: "bundle.js"
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ]
};

【问题讨论】：

尝试用publicPath: 'http://localhost:3000/static/'改变你的输出

标签： webpack

【解决方案1】：

这是 HMR 工作的入口点所必需的。它将在 prod 中通过缩小作为其“无法访问”的代码来删除

if (module.hot) {
    module.hot.accept();
}

【讨论】：

把它放在“入口点”例如你“导入”其他模块的第一个文件中。这将被定义为您的 Webpack 配置中的条目数组（之一），例如：条目：['./js/client.js', ]，Webpack 将从那里开始并构建包
是的！这个问题很久以前就问过了，哈哈。很久没用webpack了，最近又看了一遍文档，看了Enabling HMR的部分，让我想起了这个问题。这次我想出了如何让 hmr 立即工作，就像你回答需要在入口文件中做一些工作一样。突然想到一个3年前的问题真的很奇怪，很好奇为什么3年前我没有弄清楚。可能当时的文档还没有那么详细？

【解决方案2】：

简而言之 - 是的，你可以。

但是您需要编写代码来确定在热替换模块时要做什么。

您在搜索 HMR 时可能会经常遇到 React（和 Redux）的原因是它们使 HMR 变得容易。在基于 React 和 Redux 的应用程序中，绝大多数代码由无状态函数（其中许多是纯粹的，或足够纯粹的）组成，所有应用程序状态都在一个存储中。这使得热交换各种代码变得非常容易，然后只需根据旧状态重新渲染组件。

webpack HMR API 本身并不复杂。困难的部分是弄清楚如何构建和工具你自己的代码，以便它的部分可以在运行时安全地热交换。如果您使用的是流行的库或框架，那么这项工作可能已经为您完成（就像 React 和 Redux 一样），否则您需要自己完成。祝你好运！

【讨论】：

【解决方案3】：

要支持 HMR，您的模块应该定义 - 至少 - module.hot.accept 为 True。 documentation 还定义了一个 Api 来描述应该如何重新加载您可能需要实现的模块。也许你可以看看 React Hot Loader 看看他们是如何做到的。

【讨论】：