Как сделать доступным глобальный объект window в билде, собранном через webpack?

Для доступа к глобальному объекту window в коде, собранном с помощью Webpack, вам необходимо внести некоторые изменения в конфигурацию вашего проекта.

1. Установите пакет "webpack" и "webpack-node-externals":

npm install webpack webpack-node-externals --save-dev

2. Создайте файл конфигурации webpack (например, webpack.config.js) и добавьте следующий код:

const nodeExternals = require('webpack-node-externals');

module.exports = {
  //...
  target: 'web',
  externals: [nodeExternals()],
};

3. Добавьте свой скрипт сборки в ваш файл package.json, где указан путь к вашему файлу конфигурации webpack:

"scripts": {
  "build": "webpack --config webpack.config.js"
},

4. Теперь, при сборке вашего проекта с помощью команды "npm run build", глобальный объект window будет доступен в вашем коде. Вы можете использовать его, как обычно:

console.log(window.innerWidth);

Обратите внимание, что внедрение глобального объекта window может быть не безопасным и может быть легким способом для злоумышленников выполнить вредоносный код на стороне клиента. Поэтому рекомендуется использовать этот подход с осторожностью, учитывая все возможные уязвимости вашего приложения.