Страницы

Поиск по вопросам

понедельник, 29 октября 2018 г.

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

В документации 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})); });

Комментариев нет:

Отправить комментарий