Использование webpack совместно с gulp.js

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

Независимо от того, используете ли вы новейшие технологии ES6 или поддерживаете устаревший код в стиле AMD, webpack применим в любой ситуации.

Вместо создания одного гигантского JavaScript-бандла, который перегрузит браузер при загрузке сайта, можно использовать таск-менеджер Gulp.js для решения сопутствующих задач: компиляции SASS, оптимизации изображений и развёртывания на production.

Webpack + Gulp.js

Объединим простоту API Gulp с мощностью webpack для создания современного окружения разработки.

Установка зависимостей

npm i -D gulp webpack webpack-stream

Конфигурация Gulp

// gulpfile.js

const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');

gulp.task('js', () => {
    gulp.src('./src/js/index.js')
        .pipe(webpackStream(webpackConfig), webpack)
        .pipe(gulp.dest('./dist/js'));
});

Установка Babel

npm i -D babel-core babel-loader babel-preset-latest

Конфигурация Webpack

// webpack.config.js

module.exports = {
    output: {
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        ['latest', { modules: false }],
                    ],
                },
            },
        ],
    },
};

Приведённый пример демонстрирует базовую конфигурацию. Далее можно расширять настройки под требования проекта.

Запуск задачи

В терминале выполните:

gulp js