当我导入 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:

We do not support HMR as we did not yet work out a reliable way how to set it up.

a workaround though! You can enable transpileOnly: true in ts-loader. Note that just by enabling transpileOnly, you'll lose some type checking features and should use fork-ts-checker-webpack-plugin 再次进行完整类型检查。

参见 Hot module replacement guide and Docs for transpileOnly and this example。

Answer 2

我解决了类似的问题

  **resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"]
  },**

参见：https://github.com/TypeStrong/ts-loader#configuration

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

when I import ts suffix files, Webpack HMR not work;

typescript

webpack

webpack-dev-server

webpack-4