#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})); });
