С Новым годом! Форум программистов, компьютерный форум, киберфорум
Node.js
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 11.03.2020
Сообщений: 12

Отображение исходного кода js в DevTools Google chrome после обработки webpack и Babel

30.08.2021, 13:12. Показов 1162. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем доброго времени суток. Изучаю Web разработку. Столкнулся с проблемой. После того как код пройдет сборку Webpack-ом, его сложно дебажить. Исходного кода ты не видиш. Прочитал что данную пролему можно решить при помощи технологии Source map.
Начал с установки source-map-loader через npm (https://www.npmjs.com/package/source-map-loader). Все прошло отлично. Но при запуске виртуального сервера через npm start произошла ошибка. Не могу понять в чем дело. Гуглил, но ответа не нашел. Прошу помощи.
Скрин ошибки:

package.json:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
  "name": "map",
  "version": "1.0.0",
  "description": "https://github.com/LLStudent83/Map.git",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack",
    "lint": "eslint .",
    "test": "jest",
    "coverage": "jest --coverage",
    "preshow:coverage": "npm run coverage",
    "show:coverage": "live-server coverage/lcov-report",
    "preshow:dist": "npm run build",
    "show:dist": "live-server dist"
  },
  "author": "coursar",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-jest": "^25.4.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.5.3",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-plugin-import": "^2.20.2",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.2.0",
    "jest": "^25.5.4",
    "live-server": "^1.2.1",
    "mini-css-extract-plugin": "^0.9.0",
    "source-map-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "core-js": "^3.6.5"
  }
}
webpack.config.js:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    // new webpack.SourceMapDevToolPlugin({}),
  ],
};
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
30.08.2021, 13:12
Ответы с готовыми решениями:

Неправильное отображение текста Google Chrome после обновления
Обновил браузер, после этого текст неправильно отображается, так же бывало что аудио не грузила в ВК. В других браузерах все нормально....

TypeScript вместо babel и webpack
Создал tsconfig.json При помоще него можно транслировать esnext в es5, это хорошо работает, но не могу понять как собирать модули? ...

Как заставить webpack собирать один пакет в node_modules через babel
Всем привет! Поставил приложение через create-react-app, распаковал конфиги через eject. Установил один пакет (называется srk) но...

2
06.09.2021, 09:52

Не по теме:

Цитата Сообщение от DmitryEk Посмотреть сообщение
Скрин ошибки.docx
:facepalm:

0
Модератор
Эксперт функциональных языков программирования
3133 / 2280 / 469
Регистрация: 26.03.2015
Сообщений: 8,874
06.09.2021, 14:24
DmitryEk,
Текст ошибки полезнее, чем скриншот ошибки. Текст можно скопировать и вставить в гугл.

И, раз ошибка в файле index.js, то нужно привести код этого файла, а не файлы конфигурации.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
06.09.2021, 14:24
Помогаю со студенческими работами здесь

Отображение в google chrome
На сайт добавил флеш радио, но оно категорически отказывается отображаться в google chrome. В чём может быть проблема? Код добавления...

Перекидывает на go.mail.ru после запроса в поисковике google.ru d Google Chrome
Перекидывает на go.mail.ru после запроса в поисковике google.ru d Google Chrome Скачал вчера софт для просмотра файлов dwg. Во время...

Отображение фреймов в Google Chrome
Есть страничка с фреймами. На одном из фреймов меню. Но возникла проблема. При нажатии на кнопки меню, окно открывается не в нужном...

Некоректное отображение страницы в Google Chrome
Добрый вечер! Возникла проблема следующего характера, при отображении страницы в Google Chrome, получается отступ от верхнего края , в...

Отображение сайта на google chrome android
Подскажите что за отступы появляются в мобильном браузере и как их избежать при том, что в css прописано занять всю ширину и длинну...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru