когда я импортирую файлы суффиксов TS, Webpack HMR не работает; - PullRequest
Новая
       51

когда я импортирую файлы суффиксов TS, Webpack HMR не работает;

0 голосов
/ 20 января 2020

Я использую 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);
}

Ответы [ 2 ]

1 голос
/ 20 января 2020

К сожалению ts-loader не поддерживает HMR. Из их GitHub:

Мы не поддерживаем HMR, поскольку мы еще не разработали надежный способ его настройки.

Есть обходной путь хотя! Вы можете включить transpileOnly: true в ts-loader. Обратите внимание, что просто включив transpileOnly, вы потеряете некоторые функции проверки типов и должны использовать fork-ts-checker-webpack-plugin , чтобы снова получить полную проверку типов.

См. Руководство по замене горячего модуля и Документы для transpileOnly и в этом примере .

0 голосов
/ 26 апреля 2020

Я решил похожую проблему 

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

См .: https://github.com/TypeStrong/ts-loader#configuration

...