Что такое входная точка WebPack?

Входная точка Webpack

Входная точка (entry point) в Webpack — это файл, с которого начинается сборка проекта. Это первый файл, который Webpack анализирует для создания графа зависимостей всего приложения.

Основная концепция

Webpack начинает работу с входной точки и рекурсивно следует по всем импортам (import, require), чтобы собрать все необходимые модули. На основе этого графа создаются выходные файлы (бандлы).

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Простой пример

Представим структуру проекта:

src/
├── index.js
├── module-a.js
├── module-b.js
└── utils/
    └── helpers.js

src/index.js:

import './styles.css';
import { functionA } from './module-a.js';
import { functionB } from './module-b.js';

console.log('App started');
functionA();
functionB();

src/module-a.js:

import { helper } from './utils/helpers.js';

export function functionA() {
  helper();
  console.log('Function A');
}

Вебпак, начиная с index.js, построит граф всех зависимостей. Это позволяет ему понять, какие файлы включить в итоговый бандл.

Несколько входных точек

Можно определить несколько входных точек для создания нескольких бандлов:

module.exports = {
  entry: {
    main: './src/index.js',
    admin: './src/admin/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
};

Это создаст два отдельных бандла: main.bundle.js и admin.bundle.js.

Динамические входные точки

Можно задать входную точку программно, например, для автоматического создания бандла для каждой страницы:

const glob = require('glob');
const entry = {};

glob.sync('./src/pages/*/index.js').forEach((file) => {
  const name = file.match(/pages\\(\\w+\\)\\/index/)[1];
  entry[name] = file;
});

module.exports = {
  entry: entry,
};

Webpack с Node.js API

Можно задать входную точку при запуске через Node.js:

const webpack = require('webpack');
const config = require('./webpack.config.js');

config.entry = './src/custom-entry.js';

webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error('Build failed');
    return;
  }
  console.log('Build successful');
});

Входные точки в разных окружениях

Основной способ отличить development от production — передать разные входные точки:

module.exports = (env, argv) => {
  const isDev = argv.mode === 'development';
  
  return {
    entry: isDev 
      ? './src/index-dev.js' 
      : './src/index-prod.js',
  };
};

Типичные входные точки в проектах

React проект:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Vue проект:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Граф зависимостей

Основная роль входной точки — позволить Webpack построить полный граф зависимостей:

index.js (входная точка)
├── styles.css
├── module-a.js
│   └── utils/helpers.js
└── module-b.js

Вебпак анализирует все import/require и добавляет найденные файлы в бандл.

Процесс сборки

1. Webpack находит входную точку (entry)
2. Анализирует все импорты в этом файле
3. Рекурсивно анализирует импорты найденных файлов
4. Применяет loaders (Babel, CSS, и т.д.)
5. Создаёт bundle содержащий только необходимые модули
6. Выводит результат в папку output (обычно dist/)

Важные моменты

• Входная точка обязательна для каждой конфигурации
• Может быть строка (одна точка) или объект (несколько точек)
• Определяет, какой код попадёт в финальный бандл
• От входной точки зависит структура output файлов
• Часто это просто index.js в папке src/
• Может быть CSS, JSON или другой тип файла

Входная точка — это фундамент всего процесса сборки в Webpack. Без неё Webpack не сможет понять, что и как собирать.