Правильные ли конфиги вебпак и gulp для Vue проекта?

Question

[anriko]

как правильно совместить эти сборщики?

не увидел в сборке веб пак свойства entry
и подключение самого веб пака

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    watch: true,
    mode: 'none',
    output: {
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.(js)$/,
                exclude: /(node_modules)/,
                use: ['babel-loader', 'eslint-loader'],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
};

или так надо ?

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: path.join(__dirname,'src','main.js'),
    output: {
        path: path.join(__dirname,'dist'),
        publicPath:'/dist/',
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.(js)$/,
                exclude: /(node_modules)/,
                use: ['babel-loader', 'eslint-loader'],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],

}

const gulp = require('gulp');
const html = require('gulp-html');
const webpackStream = require('webpack-stream');
const gulpAutoprefix = require('gulp-autoprefixer');
const gulpSass = require('gulp-sass');
const gulpWatch = require('gulp-watch');
const gulpSourceMap = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const gulpStylelint = require('gulp-stylelint');
const image = require('gulp-image');
const historyFallback = require('connect-history-api-fallback');
const webpackConfig = require('./webpack.config.js');

gulp.task('stylesheets', () => gulp.src('./src/scss/**/*.scss')
    .pipe(gulpStylelint({
        failAfterError: false,
        reporters: [
            {
                formatter: 'string',
                console: true,
                fix: true,
            },
        ],
    }))
    .pipe(gulpSourceMap.init())
    .pipe(gulpSass({
        outputStyle: 'compressed',
    })).on('error', gulpSass.logError)
    .pipe(gulpAutoprefix({
        browsers: ['last 2 versions'],
    }))
    .pipe(gulpSourceMap.write())
    .pipe(gulp.dest('./dev/css/'))
    .pipe(browserSync.stream()));

gulp.task('stylesheetsProduction', () => gulp.src('./src/scss/**/*.scss')
    .pipe(gulpStylelint({
        failAfterError: true,
        reporters: [
            {
                formatter: 'string',
                console: true,
                fix: true,
            },
        ],
    }))
    .pipe(gulpSass({
        outputStyle: 'compressed',
    })).on('error', gulpSass.logError)
    .pipe(gulpAutoprefix({
        browsers: ['last 2 versions'],
    }))
    .pipe(gulp.dest('./build/css/')));

gulp.task('js', () => gulp.src('./src/js/main.js')
    .pipe(webpackStream(webpackConfig))
    .pipe(gulp.dest('./dev/js'))
    .pipe(browserSync.stream()));

gulp.task('jsProduction', () => {
    webpackConfig.watch = false;

    gulp.src('./src/js/main.js')
        .pipe(webpackStream(webpackConfig))
        .pipe(gulp.dest('./build/js'));
});

gulp.task('image', () => gulp.src('./src/images/*')
    .pipe(image())
    .pipe(gulp.dest('./dev/images'))
    .pipe(browserSync.stream()));

gulp.task('imageProduction', () => gulp.src('./src/images/*')
    .pipe(image())
    .pipe(gulp.dest('./build/images')));

gulp.task('html', () => gulp.src('./src/template/**/*.html')
    .pipe(html())
    .pipe(gulp.dest('./dev'))
    .pipe(browserSync.stream()));

gulp.task('htmlProduction', () => gulp.src('./src/template/**/*.html')
    .pipe(html())
    .pipe(gulp.dest('./build')));

gulp.task('watch', () => {
    gulpWatch(['./src/scss/**/*.scss'], () => {
        gulp.start('stylesheets');
    });
    gulpWatch(['./src/images/**/*'], () => {
        gulp.start('image');
    });
    gulpWatch(['./src/template/**/*.html'], () => {
        gulp.start('html');
    });
});

gulp.task('server', () => {
    browserSync.init({
        server: {
            baseDir: './dev',
            middleware: [
                historyFallback(),
            ],
        },
        open: true,
        port: 8081,
    });
});

gulp.task('development', [
    'stylesheets',
    'js',
    'image',
    'html',
    'watch',
    'server',
]);

gulp.task('production', [
    'stylesheetsProduction',
    'jsProduction',
    'imageProduction',
    'htmlProduction',
]);

Comments

[Ranwise]

anriko чем не нравится vue-cli? там есть все что нужно

[anriko]

такое техническое задание

Answer 1

[Сергей delphinpro]

Да, забивать шурупы молотком — это хороший выбор =)

Но в целом, вроде правильно. Если через webpackStream

Я так делал. правда не для Vue, а просто, чтобы писать на привычном es6.
Но я использовал node интерфейс вебпака.
Покажу свой таск, разбирайтесь:

webpack.task.js

const path = require('path');

const bs      = require('browser-sync');
const webpack = require('webpack');

const config      = require('../../gulp.config');
const tools       = require('../lib/tools');
const DEVELOPMENT = require('../lib/checkMode').isDevelopment();

let webpackConfig = require(path.join(config.root.main, 'webpack.config.js'));

function showInfo(err, stats) {
  // эту функцию приводить не буду. просто вывод ошибок в консоль
}

module.exports = function (options = {}) {

    options = {
        watch: false,
        ...options,
    };

    return function (done) {

        const compiler = webpack(webpackConfig);

        if (options.watch) {
            tools.info('Webpack watching...');

            compiler.watch({
                ignored         : /node_modules/,
                aggregateTimeout: 300,
            }, (err, stats) => {

                showInfo(err, stats);

                if (DEVELOPMENT && bs.has(config.browserSync.instanceName)) {
                    bs.get(config.browserSync.instanceName).reload();
                }
            });

        } else {

            compiler.run((err, stats) => {
                showInfo(err, stats);
                done();
            });

        }

    };
};

Comments

[anriko]

а как запустить сборку ?

[Сергей delphinpro]

anriko, то что начинается с return function (done) { — это непосредственно таск

gulp.task('webpack',  function (done) {
 ......
});

[anriko]

как с консоли запустить проект?