VSCode Webview 完美集成 Webpack 热更新

import ReactDOM from 'react-dom';
import App from './App';
​
ReactDOM.render(<App />, document.querySelector('#root'));
​
// 结果就是开始能看到 hello world，三秒后啥也看不到
setTimeout(() => {
    console.log('ready to reload');
    window.location.reload();
}, 3000);

const devEntries = [
  'webpack/hot/dev-server.js',
  `webpack-dev-server/client/index.js?${devServerClientQuery}`,
];

/*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
*/
/* globals __webpack_hash__ */
if (module.hot) {
  var lastHash;
  var upToDate = function upToDate() {
    return lastHash.indexOf(__webpack_hash__) >= 0;
  };
  var log = require('./log');
  var check = function check() {
    module.hot
      .check(true)
      .then(function (updatedModules) {
        if (!updatedModules) {
          log('warning', '[HMR] Cannot find update. Need to do a full reload!');
          log('warning', '[HMR] (Probably because of restarting the webpack-dev-server)');
          window.location.reload();
          return;
        }
​
        if (!upToDate()) {
          check();
        }
​
        require('./log-apply-result')(updatedModules, updatedModules);
​
        if (upToDate()) {
          log('info', '[HMR] App is up to date.');
        }
      })
      .catch(function (err) {
        var status = module.hot.status();
        if (['abort', 'fail'].indexOf(status) >= 0) {
          log('warning', '[HMR] Cannot apply update. Need to do a full reload!');
          log('warning', '[HMR] ' + log.formatError(err));
          window.location.reload();
        } else {
          log('warning', '[HMR] Update failed: ' + log.formatError(err));
        }
      });
  };
  var hotEmitter = require('./emitter');
  hotEmitter.on('webpackHotUpdate', function (currentHash) {
    lastHash = currentHash;
    if (!upToDate() && module.hot.status() === 'idle') {
      log('info', '[HMR] Checking for updates on the server...');
      check();
    }
  });
  log('info', '[HMR] Waiting for update signal from WDS...');
} else {
  throw new Error('[HMR] Hot Module Replacement is disabled.');
}

// scripts/webpack.config.js
const webpackHotDevServer = resolvePath(__dirname, './webpack-hot-dev-server.js');
const devEntries = [
  // 替换成改过的文件
  webpackHotDevServer,
  `webpack-dev-server/client/index.js?${devServerClientQuery}`,
];

if (!window.__vscode__) {
  window.__vscode__ = acquireVsCodeApi();
  window.__reload__ = function () {
    console.log('post message to vscode to reload!');
    window.__vscode__.postMessage({
      command: 'reload',
      text: 'from web view',
    });
  };
}

// src/MyWebView.ts
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
        this.panel = panel;
        this.extensionUri = extensionUri;
​
        this.setupHtmlForWebview();
​
        this.panel.onDidDispose(() => this.dispose(), null, this.disposables);
​
        // Handle messages from the webview
        this.panel.webview.onDidReceiveMessage(
            (message) => {
                switch (message.command) {
                // 处理 relaod 实现
                    case 'reload':
                    // 需要修改 html 内容才会 relaod，所以每次都替换了 script 的 nonce 为一个随机字符串
                        this.html = this.html.replace(/nonce="\w+?"/, `nonce="${getNonce()}"`);
                        this.panel.webview.html = this.html;
                        return;
                }
            },
            null,
            this.disposables,
        );
    }