webpack-stream: где указать настройки при использовании другой версии webpack

#javascript #gulp #webpack #webpack2 #webpack_stream

В документации webpack-stream заявлена возможность использовать не ту версию webpack,
которая является зависимостью webpack-stream, а ту, которая установлена отдельно:


  If you would like to use a different version of webpack than the one
  this plugin uses, pass in an optional 2nd argument:


var gulp = require('gulp');
var webpack = require('webpack');
var gulpWebpack = require('webpack-stream');

gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(gulpWebpack({}, webpack))
    .pipe(gulp.dest('dist/'));
});


Это привлекательно в первую очередь тем, что можно использовать последнию версию
webpack 2.x.x, а не deprecated-зависимость 1.x.x. Но где нужно прописывать настройки
webpack в данном случае? Для случаев, когда используется зависимость, примеры настроек
в документации есть (например, указание внешнего файла конфигурации или нескольких
точек входа), но для внешней версии webpack не сказано, как прописывать настройки.

Я пробовал вариант с настройками во внешнем файле. Если мы создадим webpack.config.js-файл,
то он будет проигнорирован. Webpack отработает без ошибок компиляции, но сгенерирует
файл с именем вроде ba2e257fdec0945b554e.js при следующих настройках в gulp-файле:

var  gulp = require('gulp'), 
    webpack = require('webpack'),
    webpackStream = require('webpack-stream');

gulp.task('wpstream', function() {
  return gulp.src('development/03_es6/index.js')
    .pipe(webpackStream({}, webpack))
    .pipe(gulp.dest('development/js'))
    .pipe(browserSync.reload({stream: true})); 
});


Насколько я могу сделать вывод, запуск консольной комманды gulp wpstream не приведёт
к тому же результату, что и выполнение комманды webpack. В последнем случае всё отрабатывает
корректно с учётом инструкций webpack.config.js, хотя в обоих случах выполняется та
желаемая (новая) версия webpack. 
    

Ответы

Ответ 1

когда ты конфигурируешь задачу следующим образом:    

gulp.task('wpstream', function() {
  return gulp.src('development/03_es6/index.js')
    .pipe(webpackStream({}, webpack))
    .pipe(gulp.dest('development/js'))
    .pipe(browserSync.reload({stream: true})); 
});


В webpackStream({}, webpack) ты передаешь 2 параметра:
1 - объект конфигурации
2 - движок вебпака, который будет все обрабатывать.
есть еще 3-й параметр - фукция для ручной обработки и вывода статистики и ошибок.
Тебе же нужно обратить внимание на первый агрумент который ты передаешь, а это пустой
объект.
Если заглянуть в исходники webpack-sream, то можно увидеть, что если настройки не
передаются или передается пустой объект, то webpack-sream запускает сам вебпак со своими
дефолтными настройками.
Поэтому существует как минимум 2 способа передать настройки:
1 - опрелить их прямо в webpackStream({здесь настройки}, webpack)
2- взять настройки из файла webpack.condig.js     

Во втором случае задача будет выглядеть примерно так:    

var  gulp = require('gulp'), 
    webpack = require('webpack'),
    webpackStream = require('webpack-stream'),
    webpackconfig = requre(./webpack.config.js);

gulp.task('wpstream', function() {
  return gulp.src('development/03_es6/index.js')
    .pipe(webpackStream(webpackconfig, webpack))
    .pipe(gulp.dest('development/js'))
    .pipe(browserSync.reload({stream: true})); 
});