Frontend | Вопросы собесов

📌 Что делает веб пак?



💬 Спрашивают в 3% собеседований



Webpack — это мощный инструмент сборки модулей для современных JavaScript-приложений. Он используется для упаковки и оптимизации всех ресурсов вашего приложения, таких как JavaScript, CSS, изображения и другие файлы, в один или несколько файлов, которые можно эффективно загрузить в браузер.



🤔 Основные функции



1️⃣ Сборка модулей (Module Bundling)



:plu Webpack анализирует ваше приложение, начиная с одного или нескольких входных файлов (entry points), и строит граф зависимостей всех модулей, используемых в вашем приложении.



➕ Он объединяет эти модули в один или несколько выходных файлов (bundles), которые можно загрузить в браузер.



2️⃣ Обработка ресурсов (Asset Management)



➕ Webpack может обрабатывать различные типы файлов, такие как JavaScript, CSS, изображения и шрифты, используя загрузчики (loaders) и плагины (plugins).



➕ Загрузчики позволяют вам преобразовывать файлы перед включением их в сборку. Например, загрузка CSS, преобразование ES6+ кода в ES5 с использованием Babel, оптимизация изображений и т.д.



3️⃣ Оптимизация производительности (Performance Optimization)



➕ Webpack предлагает множество встроенных функций для оптимизации выходных файлов, включая минификацию JavaScript и CSS, разделение кода (code splitting), удаление неиспользуемого кода (tree shaking) и др.



4️⃣ Горячая перезагрузка (Hot Module Replacement)



➕ Эта функция позволяет обновлять модули приложения в реальном времени без перезагрузки всей страницы. Это значительно ускоряет процесс разработки и тестирования.



🤔 Основные компоненты



1️⃣ Входные точки (Entry Points)



➕ Входные точки указывают Webpack, с какого файла или файлов начать построение графа зависимостей.

// webpack.config.js

module.exports = {

  entry: './src/index.js',

};

2️⃣ Выходные точки (Output)



➕ Выходные точки определяют, где Webpack должен сохранить сгенерированные файлы и как их называть.

// webpack.config.js

module.exports = {

  entry: './src/index.js',

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'bundle.js',

  },

};

3️⃣ Загрузчики (Loaders)



➕ Загрузчики используются для обработки различных типов файлов. Они позволяют вам преобразовывать файлы перед их включением в сборку.

// webpack.config.js

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/,

        use: ['style-loader', 'css-loader'],

      },

      {

        test: /\.js$/,

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: ['@babel/preset-env'],

          },

        },

      },

    ],

  },

};

Webpack — это инструмент для сборки модулей, который объединяет и оптимизирует различные ресурсы приложения (JavaScript, CSS, изображения и т.д.) в один или несколько файлов для загрузки в браузер. Он использует входные точки (entry points), выходные точки (output), загрузчики (loaders) и плагины (plugins) для управления процессом сборки и обеспечения оптимальной производительности.



🔥 ТОП ВОПРОСОВ С СОБЕСОВ



🔒 База собесов | 🔒 База тестовых