Точки входа и выхода в Webpack

Точка входа регулируется настройкой entry:

webpack.config.jsexport default {
  entry: './src/index.js',
};

Точка выхода регулируется настройкой output, если точка выхода не указана, по умолчанию Webpack соберет все в один файл main.js, расположенный в папке dist. Эта настройка представляет собой объект, где можно указать имя файла сборки с помощью ключа filename:

webpack.config.jsexport default {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
  }
};

В результате сборка по-прежнему будет размещаться в папке dist, но уже в указанном нами файле.

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

Можно сделать несколько точек входа. Для этого настройку entry следует сделать массивом:

webpack.config.jsexport default {
  entry: [
    './src/test1.js',
    './src/test2.js'
  ],
};

Все точки входа будут собраны в один общий файл сборки. При необходимости можно задать имя этому файлу:

webpack.config.jsexport default {
  entry: [
    './src/test1.js',
    './src/test2.js'
  ],
  output: {
    filename: 'build.js',
  }
};

Имена точек входа

Точкам входа можно давать имена, для этого настройку entry сделать в виде объекта. Ключи объекта и будут именами точек входа. Именованные точки входа будут собираться в отдельные файлы сборки. В результате после сборки в папке dist у нас появятся два файла: file1.js и file2.js:

webpack.config.jsexport default {
  entry: {
    file1: './src/test1.js',
    file2: './src/test2.js'
  },
};

Именованные точки входа могут содержать массивы точек входа. Массив точек входа будет слит в один файл сборки. В следующем примере получится два файла: file1.js и file2.js:

webpack.config.jsexport default {
  entry: {
    file1: [
      './src/test1.js',
      './src/test2.js',
    ],
    file2: './src/test3.js'
  },
};

Имена файлов сборки

С помощью команды name можно указать место, куда вставится имя точки входа. Такая возможность позволяет конфигурировать имена файлов сборки. Для примера давайте сделаем так, чтобы файлы сборки имели имена f1.build.js и f2.build.js:

webpack.config.jsexport default {
  entry: {
    f1: './src/test1.js',
    f2: './src/test2.js'
  },
  output: {
    filename: '[name].build.js',
  }
};

Абсолютный путь к папке сборки

Можно задавать абсолютный путь к папке сборки. Как правило это делается для того, чтобы обеспечить правильную работу продвинутым возможностям Webpack.

Для начала импортируем модуль path для формирования путей:

webpack.config.jsimport path from 'path';

Теперь укажем путь к папке сборке с помощью настройки path:

webpack.config.jsexport default {
  entry: [
    './src/test1.js',
    './src/test2.js'
  ],
  output: {
    filename: 'build.js',
    path: path.resolve('dist'),
  }
};

Контекст точек входа

Как правило файлы проекта лежат в какой-то папке. В нашем случае это src, в результате во всех путях нам приходится прописывать эту папку:

webpack.config.jsexport default {
  entry: [
    './src/test1.js',
    './src/test2.js'
  ],
};

С помощью команды context можно указать путь к общей папке проекта. В этом случае пути точек входа упростятся:

webpack.config.jsexport default {
  context: path.resolve('src'),
  entry: [
    './test1.js',
    './test2.js'
  ],
};