吞咽webpack：找不到Entry模块中的ERROR

Question

我使用webpack来处理JavaScript（ES6模块捆绑，转换为ES5等）和gulp - 用于其他任务（jade，sass等）。我希望将webpack配置保留在webpack.config.js中，但要按webpack任务执行gulp。

项目结构

开发

es6 - 来源JS

main.js

js - 输出JS用于开发

index.js

生产

webpack.config.js

gulpfile.js

gulpfile.js

var  gulp = require('gulp'), 
        //...
     gulpwebpack = require('gulp-webpack')


gulp.task('gulpwebpack', function(){ 

    return gulp.src('development/03_es6/main.js')
        .pipe(gulpwebpack(require('./webpack.config.js')))
        .pipe(gulp.dest('development/js/'));

});

// ...

gulp.task('watch', ['browser-sync', 'jade', 'sass'], function() {
    // ...
    gulp.watch('development/03_es6/*.js', ['test']);
});

gulp.task('default', ['watch']);

webpack.config.js

const NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = {

    context: __dirname + '/development',

    entry: './03_es6/main.js',

    output: {
        path: __dirname + '/development/js/',
        filename: 'index.js'
    },

    module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: ['babel-loader']
                }
            ]
        }

    //watch: NODE_ENV === 'development'
};

问题

如果只是从控制台执行webpack（意味着独立于webpack执行gulp），一切都会正确。但是，如果要执行gulp gulpwebpack，将显示错误消息：

 ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./development/03_es6/main.js in C:\...\projectFrolder/development

我知道错误的根源在于：

// ...

context: __dirname + '/development',

entry: './03_es6/main.js',

output: {

// ...

但development/03_es6/main.js和./development/03_es6/main.js也不会有效。 Gulp无法正确阅读webpack.config.js，不是吗？

Answer 1

我想，你应该切换到

'use strict';

const gulp = require('gulp'),
      named = require('vinyl-named'),
      webpack = require('webpack-stream');

gulp.task('webpack', function () {
  gulp.src('development/03_es6/main.js')
      .pipe(named())
      .pipe(webpack(require('./webpack.config.js')))
      .pipe(gulp.dest('./build'))
});

从webpack.config.js中删除条目：

module.exports = {

context: __dirname + '/development',

output: {
    path: __dirname + '/development/js/',
    filename: 'index.js'
},

module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    }
};

Answer 2

Webapck很强大，为什么还要使用gulp？