Gulp plus webpack uses webpack as module package, how to configure webpack.config.js and how to use gulpfile.js

  javascript, question
'use strict';
 var gulp = require('gulp'),
 imageMin = require('gulp-imagemin'),
 gutil = require('gulp-util'),
 Jsmin = require ('gulp-uglify'),//js compression
 Cssmin = require ('gulp-css'),//css compression
 eslint = require('gulp-eslint'),
 Rename = require ('gulp-rename'),//rename
 sourcemaps = require('gulp-sourcemaps'),
 clean = require('gulp-clean'),
 webpack = require('webpack'),
 gulp_webpack = require('gulp-webpack'),
 webpack_config = require('./webpack.config.js'),
 jsErrorCount = 0,
 scss = require('gulp-sass'),// scss
 Jslist = require ('./gulp-config-jslist'),//js configuration path to check
 localhostServer = require('gulp-connect');
 
 var paths = {
 scripts: 'public/scripts/*/*.js',
 styles: 'public/scss/*/*.scss',
 html: 'public/html/*/*.html',
 images: 'public/images/*/*.{jpg,png,gif}'
 };
 var dist_paths = {
 
 };
 
 gulp.task('localhostServer', function() {
 localhostServer.server({
 root: '../projectsweb',
 livereload: true,
 port: 80,
 //port: 443,
 //https: true,
 host: ''
 });
 });
 //check js
 gulp.task('jsEslint', function() {
 //The JS specific path to check needs to be set here.  .  If you use a fuzzy path, it will get stuck!  !
 return gulp.src(jsList.jsList).pipe(eslint()).pipe(eslint.result(result => {
 // Called for each ESLint result.
 if (result.errorCount > 0) {
 gutil.log('ESLint result: ', gutil.colors.cyan(`${result.filePath}`));
 gutil.log('# Errors:', gutil.colors.magenta(`${result.errorCount}`));
 jsErrorCount = result.errorCount;
 bracket
 }));
 });
 //Copy the generated HTML file to each site file
 gulp.task('distHtmlCopy', function() {
 return gulp.src(paths.html)
 .pipe(localhostServer.reload())
 .pipe(gulp.dest('dist/html'));
 });
 //compress pictures
 gulp.task('imageMin', function() {
 return gulp.src(paths.images)
 .pipe(imageMin())
 .pipe(gulp.dest('dist/images'))
 .pipe(localhostServer.reload());
 });
 gulp.task('cssMin', function() {
 return gulp.src(paths.styles)
 .pipe(scss())
 .pipe(cssMin())
 .pipe(rename({suffix: '.min'}))
 .pipe(gulp.dest('dist/css'))
 .pipe(localhostServer.reload());
 });
 gulp.task('jsMin', function() {
 return gulp.src(paths.scripts)
 .pipe(sourcemaps.init())
 .pipe(jsMin())
 .pipe(sourcemaps.write())
 .pipe(rename({suffix: '.min'}))
 .pipe(gulp.dest('dist/scripts'))
 .pipe(localhostServer.reload());
 });
 
 
 
 gulp.task('watch',['localhostServer'],function(){
 gulp.watch(paths.html, ['distHtmlCopy']);
 gulp.watch(paths.scripts, ['jsEslint','jsMin']);
 gulp.watch(paths.styles, ['cssMin']);
 gulp.watch(paths.images, ['jsMin']);
 });
 gulp.task('default',['watch'],function(){
 Log ('\ n' plus'--------------------------------------------------------------------
 Log ('\n' plus'-------'plus' \ n') please do not close CMD window;
 });

图片描述

Is there a good configuration scheme for webpack.config.js, instead of writing the entry files one by one?
In addition, how can gulpfile.js be configured with webpack.config.js?

webpack.config.js:

module.exports = {
 
 module: {
 loaders: [
 bracket
 test: /\.jsx?  $/,
 exclude: /node_modules/,
 loader: 'babel',
 query: {
 presets: ['es2015','react']
 bracket
 },
 bracket
 test: /\.(png|jpg|gif)$/,
 loader: 'url-loader?  Limit=8192' // limit = 8192 here represents an image encoded with base64 < = 8K
 },
 bracket
 test: /\.css$/,
 loader: 'style!  css'
 bracket
 bracket
 bracket
 };

Gulp uses webpack:

gulp.src('src/js/entry/**/*.js')
 .pipe(named())
 .pipe(webpack())
 .pipe(uglify())
 .pipe(gulp.dest('dist/bundle'));