gulp & webpack: ERROR in Entry module not found

Question

I use webpack for working with JavaScript (ES6 modules bundling, converting to ES5, etc.) and gulp - for other tasks ( jade , sass , etc.). I want to keep the webpack configuration in webpack.config.js , but to execute webpack by gulp task.

---

Project structure

📁 development

📁 es6 - source JS

📄 main.js

📁 js - output JS for development

📄 index.js

📁 production

📄 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'
};

---

Problem

If just to execute webpack from the console (it means to execute the webpack independently from gulp ), everything will be correct. However, if to execute gulp gulpwebpack , the error message will appear:

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

I understand that the origin of error is here:

// ...

context: __dirname + '/development',

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

output: {

// ...

However development/03_es6/main.js and ./development/03_es6/main.js will not work too. Gulp can not read webpack.config.js correctly, isn't it?

Answer 1

I think, you should switch to

 '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')) }); 

Remove entry from 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'] } ] } };