Как сделать сборку файлов js, но один оставить всегда подключаемым?

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

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

Если вы хотите оставить один файл всегда подключенным, вы можете задать его в качестве точки входа для вашей сборки. Точка входа - это главный файл, с которого Webpack начинает собирать граф зависимостей.

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

module.exports = {
  entry: {
    main: './path/to/main.js'
  },
  // остальная конфигурация Webpack
};

В этом примере мы указываем, что файл "main.js" должен быть использован как точка входа. Webpack будет искать зависимости этого файла и добавлять их в сборку.

Когда вы запускаете сборку с помощью Webpack, вы получите бандл, который будет содержать все модули, включая файл "main.js", их зависимости и зависимости зависимостей. Файл "main.js" будет всегда подключен в этом бандле.

Если вы также хотите создать отдельный файл с только этим модулем, вы можете использовать плагин Webpack, такой как "SplitChunksPlugin". Этот плагин позволяет вам разделить бандл на несколько файлов, включая разделение на отдельные файлы по зависимостям.

Например, вы можете настроить Webpack следующим образом:

const path = require('path');

module.exports = {
  entry: {
    main: './path/to/main.js',
    other: './path/to/other.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10
        }
      }
    }
  },
  // остальная конфигурация Webpack
};

Здесь мы создаем точку входа "main.js" и "other.js". Затем мы используем плагин "SplitChunksPlugin" и настраиваем его с помощью параметра "cacheGroups", чтобы разделить наше приложение на отдельные файлы, включая файлы по зависимостям.

Помимо этого, вы также можете настроить Webpack для динамической загрузки модулей с помощью методов таких как import(). Это позволит вам загружать модули асинхронно по требованию, что может быть полезно для оптимизации производительности вашего приложения.