Отладка в chrome с помощью webpack-dev-server: необработанная ошибка ссылки, {переменная} не определена - PullRequest
Новая
       6

Отладка в chrome с помощью webpack-dev-server: необработанная ошибка ссылки, {переменная} не определена

0 голосов
/ 14 октября 2018

Я начинаю с Webpack и плагина webpack-dev-server, и я столкнулся с некоторой путаницей.После запуска webpack-dev-server с использованием сценария npm с флагами --watch и --open я заметил, что не могу получить доступ к любой из переменных, объявленных в глобальной области действия моего сценария, с помощью консоли chrome devtools.

Отрывок сценариев npm из package.json 

"scripts": {
    "dev": "webpack --env.mode development",
    "live": "webpack-dev-server --env.mode development --watch --open",
    "prod": "webpack --env.mode production"
  },

Пример кода из index.js 

const foo = 'bar';
console.log(foo);

Вывод на консоль 

bar
>foo
VM1361:1 Uncaught ReferenceError: foo is not defined
    at <anonymous>:1:1
(anonymous) @ VM1361:1

При начальной загрузке страницы консоль записывает значение foo, которое равно 'bar'.Но если я пытаюсь получить доступ к foo в консоли, я получаю сообщение об ошибке, как показано выше.

При начальной загрузке страницы вывод 'bar' из оператора console.log (foo) ссылается на index.js: 2 [[webpack: ///./src/js/index.js]]

Почему при попытке (выдает ошибку) получить доступ к переменной foo из консоли, она ссылается наместоположение VM1361: 1 [[debugger: /// VM1361: 1]]

Я был бы очень признателен за любую помощь в том, как решить эту проблему, так как я полагаю, что здесь явно что-то упущено.

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

1 Ответ

0 голосов
/ 14 октября 2018

Вы видели файл пакета, сгенерированный webpack?Вы, кажется, объявляете глобальную переменную, но в действительности переменная находится в IIFE.Это не глобально, это ограничено. 

// In your bundle.js, search for a, you'll find the snippet below.
/******/ ([
/* 0 */
/***/ (function(module, exports) {

var a = 1;
console.log(a);

/***/ })
/******/ ]);
...