title: when I import ts suffix files, Webpack HMR not work;
body: <p>I use the HMR as per the official <a href="https://webpack.js.org/guides/hot-module-replacement/" rel="nofollow noreferrer">documentation</a>, when I import <code>.js</code> suffix files, it works very well. but when I import <code>.ts</code> suffix files, HMR not work;</p>
  
  <p>I guess if <code>ts-loader</code> did something.</p>
  
  <p>here is my config:</p>
  
  <p>webpack.config.js :</p>
  
  <pre class="lang-js prettyprint-override"><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    devServer: {
      port: 3031,
      hot: true
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js']
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html'
      })
    ]
  };
  </code></pre>
  
  <p>index.ts :</p>
  
  <pre class="lang-js prettyprint-override"><code>import printMe from './test';
  printMe();
  
  if ((module as any).hot) {
    (module as any).hot.accept('./test', function () {
      console.log('Accepting the updated printMe module!');
      printMe();
    })
  }
  </code></pre>
  
  <p>test.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function printMe() {
    const dom = document.createElement('div');
    dom.innerHTML = 'I get called from printMe';
    document.body.append(dom);
  }
  </code></pre>