Webpack сжимает js файлы, но как вызвать с файла функцию в другом файле js?

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

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

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

Начнем с файла, в котором функция определена. Предположим, что у нас есть файл "functions.js" с содержимым:

export const sum = (a, b) => {
  return a + b;
}

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

import { sum } from './functions';

console.log(sum(2, 3)); // Выведет 5

В этом примере мы используем ключевое слово import для импорта функции sum из файла functions.js. Мы указываем путь к файлу относительно текущего файла, используя относительный путь './functions'.

Обратите внимание, что функция sum экспортирована с использованием ключевого слова export в файле functions.js. Это позволяет другим файлам импортировать эту функцию.

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

Если вы используете Webpack, возможно, вам потребуется настроить правила импорта и экспорта в файле конфигурации Webpack (например, webpack.config.js), чтобы указать Webpack, как обрабатывать импорты и экспорты.

Например, в файле конфигурации Webpack:

module.exports = {
  // ...другие настройки
  module: {
    rules: [
      // ...другие правила
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

В приведенном выше примере используется Babel при помощи babel-loader для обработки JavaScript-файлов перед их сборкой Webpack. Мы указываем, что Babel должен использовать пресет @babel/preset-env для транспиляции кода, если это необходимо для поддержки старых браузеров.

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