Using module hot replacement in electron

Time:2020-11-21

Using module hot replacement in electron

Electron + React + WebpackThis combination of desktop applications is quite cool.

If you put it on againWebpackOfHot Module ReplacementThat’s perfect. It doesn’t have to be refreshed.

aboutHMRYou can watch the video of Dan Abramov’s speechHot Reloading with Time Travel

stayElectronUse inHMRThe problem is that the open file is local,hostIt becomesfile://

So after monitoring the change,WebpackWhen you try to update a module, it cannot be foundhot-update.json, and thenWebpackUnable to update module

Using module hot replacement in electron

It took me a long time for this question to drive me crazy, so this article is to record the pit at that time.

As shown in the figure above, the configuration used at that time was the official way to usewebpack-dev-serverandreact-hot-loader

import path from 'path'
import webpack from 'webpack'

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
}

And change it toReact Hot Loader 3After a try, as expected, it still failed.

Thought there was something wrongwebpack-dev-serverSo focus on replacementwebpack-dev-serverYes.

Then useexpress + webpack-dev-middleware + webpack-hot-middlewareBuild your own services.

'use strict'

import express from 'express'
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'

import config from './webpack.config.dev'

const app = express()
const compiler = webpack(config)
const PORT = 3000

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  noInfo: false,
  reload: true,
  stats: {
    colors: true
  }
}))

// hot
app.use(webpackHotMiddleware(compiler))

app.listen(PORT, 'localhost', (err) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(`Listening at http://localhost:${PORT}`)
})

However, it still can’t. finally, we studied the warehouseto configure
It is found that there is such a configurationtarget: 'electron-renderer'However, it is not stated in the official documents.

Note: target: 'electron-renderer'Attribute is inWebpack v1.12.15Version addedmake electron-main and electron-renderer targets works in 1.x

In order to avoid more people following my example, I will give it to youWebpackDescription added to the documentCompare: configuration

At this time, the problem of hot replacement is solved. This process can be seen from the submission historyPupaFM

But…

When I had time to review the problem later, I always thought that the first way should be able to solve it,
Therefore, the configuration of the first mode is addedtarget: 'electron-renderer'However, there is no soft use

Finally, I checked it againWebpackI have a close look at the documentoutput.publicPathThis configuration.

output.publicPath

The publicPath specifies the public URL address of the output files when referenced in a browser.

For loaders that embed <script> or <link> tags or reference assets like images,
publicPath is used as the href or url() to the file when it’s different then their location on disk (as specified by path).
This can be helpful when you want to host some or all output files on a different domain or on a CDN.
The Webpack Dev Server also takes a hint from publicPath using it to determine where to serve the output files from.
As with path you can use the [hash] substitution for a better caching profile.

Then I just need to change the relative path to an absolute address, and then I can listen to the update of the file.

That’s all it takespublicPath: 'http://localhost:3000/static/'

Then wrote a demo, specific code can refer toElectron React Hot Boilerplate

Sure enough

Still need to read the document well, althoughWebpackThere are also some holes in the documents.

Link to original texthttp://xwartz.github.io/pupa/2016/06/electron-with-hmr/

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]