Как настроить webpack через gulp?

Question

[v3shin]

Всем привет. Почему-то не собираются js файлы с помощью связки gulp+webpack.
Есть такая gulptask'а:

webpack.js

var $ = require('gulp-load-plugins')()
var gulp = require('gulp')
var path = require('path')
var webpackStream = require('webpack-stream')
var webpack = webpackStream.webpack

var config = {
  entry: {
    'admin/product': './frontend/js/admin/product',
  },
  output: {
    filename: '[name].js',
  },
  externals: {
    jquery: 'jQuery',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'frontend/js'),
        loader: 'babel?presets[]=es2015',
      },
    ],
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'admin/product',
      chunks: ['admin/product'],
    }),
  ],
}

module.exports = function (options) {
  return function () {
    return gulp
      .src(options.src)
      .pipe(
        $.plumber({
          errorHandler: $.notify.onError(function (err) {
            return {
              title: 'Webpack',
              message: err.message,
            }
          }),
        })
      )
      .pipe(webpackStream(config))
      .pipe($.if(true, $.uglify()))
      .pipe(gulp.dest(options.dest))
  }
}

Запускается это через командную строку от имена администратора:
gulp webpack

Gulpfile имеет такой вид:

gulpfile.js

var gulp = require('gulp');
function lazyRequireTask(taskName, path, options) {
	options = options || {};
	options.taskName = taskName;
	gulp.task(taskName, function(callback) {
		var task = require(path).call(this, options);
		return task(callback);
	});
}
lazyRequireTask('webpack', './frontend/gulp-task/webpack', {
	src: ['./frontend/js/admin/*.js'],
	dest: './web/js/'
});

Код /frontend/js/admin/product.js:

/frontend/js/admin/product.js

require('./components/product');

На выходе в /web/js/admin/ не получается файл. Файл вообще не создается. Ожидаемый файл должен иметь вид:

/web/js/admin/product.js

webpackJsonp([1],{10:function(t,e){function v(){this.$grid=$(".products__grid"),this.init()}v.prototype.eventTabActive=function(){var t=app.getUrlParam("tab");if(!t)return!1;$("#tab-link-"+t).click()} ... и еще куча минифицированного кода.

Если из task'и убрать строку .pipe(webpackStream(config)), скрипт собирается в /web/js/ - не куда надо - и имеет тот же вид, что и исходники.
В чем может быть проблема или в какую сторону читать?

Comments

[Антон Литвиненко]

как пропатчить KDE под FreeBSD

[v3shin]

Антон Литвиненко, не помогло.

[Джек Ричер]

Антон Литвиненко, ну нравится человеку пользоваться Gulp (он как минимум простой в обращении), почему бы при этом не собирать js с помощью Webpack (если не мешают побочные эффекты).
Всё бы вам прокачаным дядькам ёрничать над начинающими ).

[v3shin]

ui_ux, мне не нравится gulp, мне не нравится webpack, мне... что? А, да! Мне вооПще ничего не нравится, сэр. Но на проекте мой предшественник настроил сборку именно так, а потом уволился. И сейчас все верстальщики пытаются собирать статику именно так. При этом, походу, она ни у кого не собирается, но периодически файло обновляется и никто не знает, почему. Я вот решил разобраться.

Answer 1

[v3shin]

В общем, проблема была где-то с webpack-stream, ее я решить не смог. Зато файлы нормально собрались через webpack без gulp'а с тем же конфигом.
Правильный ответ такой: так как у нас на проекте никто не знает как собирать статику, я могу лепить что хочу. Добавил задачу в package по сборке через webpack и работаю через нее.

Answer 2

[Alexander-Korotckevich]

Решил подобную проблему установкой более старой версии webpack-stream. В моем случае поменял 7 версию на 4+.