Webpack

Информация по настройке Webpack

Используем CommonJS

В первом файле main.js создаем функцию для экспорта и экспортируем её при помощи метода exports

function myModule() {
    this.hello = function () {
        console.log('hello');
    };
    this.goodby = function () {
        console.log('goodby');
    };
}
module.exports = myModule;

В файле в котором мы хотим использовать экспортируемую функцию index.js мы её импортируем при помощи require, при этом расширение не указывается

const myModule = require('./lesson71');
const myModuleInstance = new myModule();
myModuleInstance.hello();
myModuleInstance.goodby();

Для сборки модулей используется Webpack. Эта утилита позволяет не только собирать скрипты, но и обрабатывать проект.

Пример файла webpack.config.js

'use strict';
let path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/js/script.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist/js'
  },
  watch: true,
  devtool: "source-map",
  module: {}
};

mode: 'development' – значит что проект собирается в отладочном режиме.

watch: true – значит webpack будет автоматически отслеживать изменения в наших файлах и каждый раз пересобирать проект при изменении.

devtool: "source-map" – source-map хранит информацию об исходниках для удобства отладки кода. Возможные режимы devtool.