gulp & webpack:没有找到进入模块的错误

Question

我使用webpack处理JavaScript (ES6模块绑定、转换为ES5等)。和gulp -用于其他任务(jade、sass等)。我希望将webpack配置保留在webpack.config.js中，但希望通过gulp任务执行webpack。

项目结构

开发

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 (意思是独立于gulp执行webpack )，那么一切都是正确的。但是，如果要执行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']
            }
        ]
    }
};

​