CODEWITHSUNDEEP
webpack
Kreja
Kreja

Reputation: 291

Can I use hot module replacement with webpack but not use react?

I tried using hot module replacement but never succeed. Then I found this repository, it can use hot module replacement well. And it uses a react-hot loader, if I remove this loader, I'll get the error:

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

I adjust my project according to the above repository, but I'm not using react, so I don't use react-hot loader, thus I always get the above error.

Can I use hot module replacement with webpack but not use react? Or I just need a xx-hot loader to make it hot module replaceable?

My structure:

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

Upvotes: 4

Views: 2307

Answers (3)

Dan Brown
Dan Brown

Reputation: 136

this is required in the entrypoint for HMR to work. It will be removed by minification in prod as its 'unreachable' code

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

Upvotes: 2

Cam Jackson
Cam Jackson

Reputation: 12304

In short - yes you can.

But you'll need to write code that determines what to do when a module is hot-replaced.

The reason you might be coming across React (and Redux) a lot in your searches for HMR, is that they make HMR easy. In a React & Redux-based app, the vast majority of the code consists of stateless functions (many of them pure, or pure enough), with all of the application state in a single store. This makes it very easy to hot-swap out all kinds of code, and then just re-render the components based on the old state.

The webpack HMR API itself isn't that complicated. The hard part is figuring out how to structure and tool your own code so that bits of it can be safely hot-swapped at runtime. If you're using a popular library or framework, that work may have already been done for you (as it has for React and Redux), otherwise you'll need to do it yourself. Good luck!

Upvotes: 2

fredericlb
fredericlb

Reputation: 301

To support HMR, your module should define - at least - module.hot.accept to True. The documentation also defines an Api to describe how your module should be reloaded that you might need to implement. Maybe you could have a look to the React Hot Loader to see how they have done it.

Upvotes: 1

Related Questions