Webpack 4 — Исходные карты

В этой статье webpack 4: режим и оптимизация предполагается, что когда mode устанавливается на development, devtool устанавливается на eval.

Я ожидал, что это вызовет создание исходной карты, но запустил webpack-4-quickstart либо в development или режим production приводит к тому, что исходные карты не создаются.

Как я могу создавать исходные карты с помощью webpack 4?


person kimsagro    schedule 26.02.2018    source источник
comment
Кажется вводящим в заблуждение, поскольку ошибка исправлена, вам все равно нужно установить параметр конфигурации devtool.   -  person VuesomeDev    schedule 25.03.2018


Ответы (2)


Я думаю, что вы ожидаете извлеченный файл, включающий исходные карты, такие как 'bundle.js.map', но тип eval не создает отдельный файл:

eval — каждый модуль выполняется с помощью eval() и //@ sourceURL. Это довольно быстро. Основным недостатком является то, что он неправильно отображает номера строк, поскольку он сопоставляется с транспилированным кодом, а не с исходным кодом (нет исходных карт из загрузчиков).

Но вы всегда можете сделать это, вручную настроив свойство devtool, например:

devtool: 'source-map'

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

ИЗМЕНИТЬ:

На самом деле на github есть проблема, связанная с этим PR. Прямо сейчас плагин UglifyJS установил sourceMap: false даже в рабочем режиме и не позволяет извлекать исходные карты в отдельный файл даже с установленным devtool.

person Tomasz Mularczyk    schedule 26.02.2018
comment
Похоже, что вышеуказанная проблема в разделе EDIT: была закрыта, и она больше не является проблемой с [email protected]. - person Peter V. Mørch; 21.01.2019

Самая простая настройка — добавить devtool: 'source-maps', как и раньше.

module.exports = {
  devtool: 'source-map',
  ...
};

Но это генерирует исходные карты как для режима development, так и для режима production.

person Csaba    schedule 26.02.2018