Gulp & webpack: ERROR in input module not found
I use webpack
for working with JavaScript (adding ES6 modules, converting to ES5, etc.) and gulp
- for other tasks ( jade
, sass
etc.). I want to keep the configuration webpack
in webpack.config.js
but complete the task webpack
gulp
.
Project structure
📁 development
📁 es6 - JS source
📄 main.js
📁 js - JS output 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 you just execute webpack
from the console (it means execute webpack
regardless of gulp
), everything will be correct. However, if executed gulp gulpwebpack
, an error message appears:
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 the error is here:
// ...
context: __dirname + '/development',
entry: './03_es6/main.js',
output: {
// ...
However, development/03_es6/main.js
and ./development/03_es6/main.js
also will not work. Gulp can't read correctly webpack.config.js
, can it?
source to share
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']
}
]
}
};
source to share