当我导入ts后缀文件时，Webpack HMR不起作用；

Question

我按照官方documentation使用HMR，当我导入.js后缀文件时，它工作得很好。但是当我导入.ts后缀文件时，HMR无法正常工作；

我想ts-loader是否做了点什么。

这是我的配置：

webpack.config.js：

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

index.ts：

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

test.ts：

export default function printMe() {
  const dom = document.createElement('div');
  dom.innerHTML = 'I get called from printMe';
  document.body.append(dom);
}

Answer 1

[很遗憾，ts-loader不支持HMR。从他们的GitHub：

我们不支持HMR，因为我们尚未找到可靠的设置方法。

虽然有a workaround！您可以在transpileOnly: true中启用ts-loader。请注意，仅通过启用transpileOnly，您将失去一些类型检查功能，应使用fork-ts-checker-webpack-plugin再次进行完全类型检查。

请参见Hot module replacement guide和Docs for transpileOnly和transpileOnly。