我可以使用webpack更换热模块但不使用react吗？

2023年3月25日 230次阅读

我尝试使用热模块替换但从未成功.

然后我发现这个
repository,它可以很好地使用热模块替换.它使用反应热的加载器,如果我删除这个加载器,我会得到错误：

[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()
    ]
};

最佳答案 简而言之 – 是的,你可以.

但是,您需要编写代码来确定模块热替换时要执行的操作.

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

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

点赞