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

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

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

Я стараюсь не писать всё приложение в одном гигантском бандле JavaScript которым явно подавиться любой браузер при загрузке сайта. Мне нравится использовать таск менеджер Gulp.Js, это удобный менеджер задачь, который помогает с такими задачами как компиляция SAAS на лету, сжатие картинок, выкладка проекта на продакшен итд. Однако есть вероятность, что вам может понадобиться добавить в проект немного JavaScript. Каково решение для этого сценария?

Webpack + Gulp.js = <3

Давайте объединим простоту API Gulp'a с мощьностью webpack, чтобы создать себе удобное и современное окружение для разработки на JavaScript. Для начала установим эти замечательные инструменты:

npm i -D gulp webpack webpack-stream

Теперь напишем конфиг Галпа:

// 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'));
});

Теперь расскажем Вебпаку, что он должен делать:

npm i -D babel-core babel-loader babel-preset-latest
// 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 >
 ---------
        \   ^__^
         \  (@@)\_______
            (__)\       )\/\
                ||----w |
                ||     ||