Я запускаю проект Angular 4 с Webpack 2.4.
По некоторым причинам некоторые из сторонних файлов плагинов Javascript изменяются после компиляции, и они отображаются в отладчике браузера как очень длинная строка с одной строкой:
Это очень неудобно, потому что я не могу использовать отладчик Chrome/FF, так как я не могу установить там какую-либо точку останова.
Следуя некоторым из уже опубликованных вопросов на этом сайте и многих других, я извлек файл webpack.config.js
, выполнив ng eject
Раздел, в котором импортируются файлы js
, выглядит следующим образом:
{
...
"scripts": [
...
"script-loader!./node_modules/handsontable-pro/dist/handsontable.full.js",
...
],
"styles": [
...
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
}
Файл handsontable.full.js
не похож на файл в моей папке проекта. Кажется, он довольно структурирован. Похоже, что какая-то модификация при создании и обслуживании приложения.
Более проблематично, многие другие файлы в папке node_modules
не имеют такой же проблемы.
Теперь я попытался настроить webpack.config.js
, как это было предложено на многих форумах, в частности SourceMapDevToolPlugin
, но с очень небольшой удачей.
Итак, здесь возникает несколько вопросов:
Проверьте свойство devtool:
в объекте конфигурации Webpack. Если он настроен на eval
, cheap-eval-source-map
(или что-то вроде этого, не помню всех опций eval), попробуйте изменить его на source-map
или source-map
cheap-source-map
.
Полный список вариантов: https://webpack.js.org/configuration/devtool/