Как настроить webpack output path для записи в существующие директории при множественных точках входа?

Настройка выходного пути в Webpack может быть выполнена для записи в существующие директории при наличии множества точек входа. Для этого вам понадобится правильно настроить соответствующую конфигурацию вебпака.

Webpack может иметь несколько точек входа, что означает, что у вас есть несколько файлов, с которых начинается процесс сборки. Путь вывода может быть настроен для каждой точки входа индивидуально или для всех точек входа сразу.

Давайте рассмотрим настройку выходного пути для всех точек входа сразу. Для этого вам понадобится изменить настройку output в вашем файле конфигурации Webpack. Вот пример:

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

В этом примере у нас есть две точки входа, 'app' и 'admin'. Файлы сборки для обеих точек входа будут сохранены в папке 'dist', которая будет создана, если она еще не существует. Имя файла сборки будет содержать имя точки входа, заданное при объявлении точек входа. Для 'app' файл сборки будет называться 'app.bundle.js', а для 'admin' - 'admin.bundle.js'.

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

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    pathinfo: false,
    publicPath: '/'
  },
  optimization: {
    runtimeChunk: 'single'
  },
};

Здесь мы используем те же точки входа, что и в предыдущем примере, но каждая точка входа имеет свой собственный путь вывода. Файл сборки для 'app' будет сохранен в папке 'app_dist', а файл сборки для 'admin' будет сохранен в папке 'admin_dist'.

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: function (pathData, chunk) {
      if (chunk.name === 'app') {
        // Путь вывода для точки входа 'app'
        return path.resolve(__dirname, 'app_dist');
      }
      if (chunk.name === 'admin') {
        // Путь вывода для точки входа 'admin'
        return path.resolve(__dirname, 'admin_dist');
      }
      // Путь вывода по умолчанию
      return path.resolve(__dirname, 'dist');
    },
    pathinfo: false,
    publicPath: '/'
  },
  optimization: {
    runtimeChunk: 'single'
  },
};

В этом примере мы используем функцию для задания пути вывода для каждой точки входа в зависимости от ее имени. Если имя точки входа "app", файл сборки будет сохранен в папке "app_dist". Если имя точки входа "admin", файл сборки будет сохранен в папке "admin_dist". Для всех остальных точек входа будет использоваться путь вывода по умолчанию, 'dist'.

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