В документации 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.
Ответ
когда ты конфигурируешь задачу следующим образом:
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}));
});
Комментариев нет:
Отправить комментарий