Согласование gulpfile.js и webpack.config.js для Webpack

353
20 апреля 2017, 17:21

После ответа на этот вопрос я решил, что пусть за всё, что связано с JavaScript (сборка модулей, Babel-конвертация, а также конкатенация и минификация JS-кода для продакшен-сборки) отвечает Webpack, а за всё остальное (например, компиляция sass и jade) пусть отвечает gulp.

Посмотрев документацию пакета gulp-webpack, я понял, что теперь все настройки webpack прописываются в gulpfile.js, а не в webpack.config.js, как при использовании "чистого" webpack. В этом вопросе я бы хотел рассмотреть случай, когда все настройки webpack останутся в webpack.config.js, а в gulpfile мы лишь пропишем запуск команды webpack для development-сборки JavaScript, и запуск продакшен-сборки JS.

На данный момент, пользуюсь примерно такой конфигурацией webpack.config.js:

const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');
module.exports = {
    context: __dirname + '/app',
    entry: "./main",
    output: {
        path: __dirname + '/public/js',
        filename: 'index.js'
    },
    watch: NODE_ENV === 'development',
    watchOptions: {
        aggregateTimeout: 100
    },
    devtool:NODE_ENV === 'development' ? 'cheap-inline-module-source-map' : null,
    plugins: [
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV)
        })
    ],
    resolve: {
        modulesDirectories: ['node_modules'],
        extentions: ['', '.js']
    },
    resolveLoader: {
        modulesDirectories: ['node_modules'],
        moduleTemplates: ['*-loader', '*'],
        extentions: ['', '.js']
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader?presets[]=es2015',
            optional: 'runtime'
        }]
    }
};
if (NODE_ENV === 'production') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings: false,
                drop_console: true,
                unsafe: true
            }
        })
    );
}
  • Консольная комманда webpack запускает сборку модулей, при этом осуществляется конвертация в старый JS с помощью Babel. NODE_ENV по умолчанию имеет значение development и принимает это значение при запуске webpack.
  • Продакшен-сборка выполняет также минификацию файла. Для запуска продакшен-сборки в Windows необходимо выполнить консольную команду SET NODE_ENV=production и затем - webpack.

Так как теперь за watching отвечает gulp, то соответствующие настройки из webpack.config.js можно убрать, а в gulpfile.js будет что-то вроде

gulp.task('watch', ['browser-sync', 'sass', 'jade', 'webpack'], function() {
    gulp.watch('development/jade/*.jade', ['jade']); 
    gulp.watch('development/sass/*.+(sass|scss)', ['sass']);
    gulp.watch('development/es6/*.js', ['webpack']);
});
gulp.task('default', ['watch']);

Вопрос

Как будут выглядеть следующие два gulp-таска?

  1. Таск, выполнение которого эквивалентно выполнению консольной команды webpack для development-сборки JS-файлов.
  2. Таск, выполнение которого эквивалентно выполнению консольных комманд SET NODE_ENV=productionwebpack для продакшен-сборки JS-файлов.

Wathcing файлов берёт на себя gulp. Все настройки webpack - в webpack.config.js; из gulpfile.js мы только запускаем нужные комманды вместо того, чтобы делать это из консоли.

Заготовка кода для ответа

Я добавлю заготовку gulpfile.js, чтобы Вам было писать меньше кода:

var  gulp = require('gulp'), 
        webpack = require('gulp-webpack'),
        jade = require('gulp-jade'),
        sass = require('gulp-sass'),
        browserSync  = require('browser-sync'),
        autoprefixer = require('gulp-autoprefixer');
gulp.task('jade', function() { 
    // не по теме
});
gulp.task('sass', function(){ 
    // не по теме
});
gulp.task('webpack', function() {
  return gulp.src('development/es6/entry.js')
    .pipe(webpack()) // запуск development-сборки JS-файлов в соответствии с настройками в webpack.config.js
    .pipe(gulp.dest('development/'));
});
gulp.task('browser-sync', function() { 
    // не по теме
});
gulp.task('watch', ['browser-sync', 'sass', 'webpack'], function() {
    gulp.watch('development/es6/*.js', ['webpack']); // watching берёт на себя gulp
    gulp.watch('development/jade/*.jade', ['jade']); 
    gulp.watch('development/sass/*.+(sass|scss)', ['sass']);
});

// development-сборка проекта; включает в себя вызов development-сборки webpack, что ранее делалось через консоль
gulp.task('default', ['watch']); 
// production-сборка проекта, включает в себя вызов production-сборки webpack, что ранее делалось через консоль
gulp.task('build', ['sass', 'webpack'], function() {
    // Нужен таск, эквивалентный вызову из консоли  SET NODE_ENV=production -> webpack
    // ... 
});
READ ALSO
cron.js throw ошибка в телеграмм боте

cron.js throw ошибка в телеграмм боте

При запуске команды nodejs indexjs выводит следующую ошибку

312
Как делают универсальных ботов

Как делают универсальных ботов

Добрый день, я не жду от вас готового решения, я просто интересуюсьКак программисты делают универсального бота для интернета В сети есть...

320
Счетчик публикаций в блоке “Поделиться”

Счетчик публикаций в блоке “Поделиться”

Добрый деньПытаюсь настроить на одностраничнике блок "поделиться" от Яндекса

264