Webpack, импортирующий файлы без выходных данных расширения, неправильно изменяется в HMR (горячая замена модуля)

Я следую этому руководству и пишу код, подобный этому руководству. Все нормально! Но когда я меняю import printMe from './print.js' на import printMe from './print', HMR неправильно выводит изменения!

Когда я меняю следующее в print.js:

   export default function printMe() {
 -   console.log('I get called from print.js!');
 +   console.log('Updating print.js...')
   }

Консоль должна вывести: Обновление print.js...

Но выводит: мне звонят из print.js!

Когда я отправляю изменение «Обновление print.js ...» на «Обновление print.js снова ...», оно не изменяется.

Ниже мой снимок:

консольный вывод

Однако разрешение модуля говорит:

  • Если путь имеет расширение файла, то файл сразу объединяется.
  • В противном случае расширение файла разрешается с помощью параметра resolve.extensions, который сообщает распознавателю, какие расширения (например, .js, .jsx) приемлемы для разрешения.

и resolve-extensions также говорит:

Автоматически разрешать определенные расширения. По умолчанию это:

extensions: [".js", ".json"]

Итак, мой вопрос: не может ли веб-пакет разрешить путь без расширения, как указано выше? Это ошибка или я что-то делаю не так? Я просто изменил import printMe from './print.js' на import printMe from './print'.

Моя среда:

  • узел v7.4.0
  • нпм 4.0.5
  • веб-пакет 3.4.1
  • webpack-dev-сервер 2.6.1
  • macOS Сьерра 10.12

Большое спасибо!!


webpack javascript webpack-hmr webpack-dev-server hot-module-replacement
person Sam Yang    schedule 31.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кажется, я знаю, почему это работает неправильно.

Что я делаю:

источник/index.js

import _ from 'lodash';
import printMe from './print';

// ...

if(module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    printMe();
  });
}

Но вы всегда должны делать имя import и первый параметр module.hot.accept одинаковыми:

источник/index.js

import _ from 'lodash';
import printMe from './print';

// ...

if(module.hot) {
  module.hot.accept('./print', function() {
    console.log('Accepting the updated printMe module!');
    printMe();
  });
}

ИЛИ:

источник/index.js

import _ from 'lodash';
import printMe from './print.js';

// ...

if(module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    printMe();
  });
}

Все эти две ситуации работают. Это может быть ожидаемое поведение авторов webpack. Но, с моей точки зрения, все три ситуации должны были сработать. :(

person Sam Yang    schedule 05.08.2017