Использование 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 |
 || ||