In this problem, Gulp and Webpack are integrated by Webpack-stream, so the instructions for Webpack included in gulpfile.js. Currently, I use webpack 3.4.1 and webpack-stream 4.0.0.
const gulp = require('gulp'),
gulpIf = require('gulp-if'),
webpackStream = require('webpack-stream'),
webpack = webpackStream.webpack,
named = require('vinyl-named');
I need to define the conditional output, then created the function inside gulp.dest(). Thanks to vynil-named, we don't need to define the entry points, however to define the output condition, we need to know where file gotten from (it may be public or admin paths, for example).
Inside gulp.dest(), it says that file gotten from C:\MyIde\projects\testProj\someEntryPoint.js, however actually this file is in C:\MyIde\projects\testProj\source\public\js\someEntryPoint.js:
gulp.task('webpack', function(){
/* Entry points locations:
C:\MyIde\projects\testProj\source\public\js
C:\MyIde\projects\testProj\source\admin\js */
return gulp.src('source')
.pipe(named())
.pipe(webpackStream())
.pipe(gulp.dest( file => {
console.log('path: '+ file.path);
// Output to console: "path: C:\MyIde\projects\testProj\someEntryPoint.js"
// Real file path: C:\MyIde\projects\testProj\source\public\js\someEntryPoint.js
Before I ask "How to define desired output paths?", I need to understand what's going on. I defined the output paths for pug and sass by same way: nothing like this happened.
Update
The answer should be here, in the end webpack-stream's index.js...
function prepareFile (fs, compiler, outname) {
var path = fs.join(compiler.outputPath, outname);
if (path.indexOf('?') !== -1) {
path = path.split('?')[0];
}
var contents = fs.readFileSync(path);
var file = new File({
base: compiler.outputPath,
path: nodePath.join(compiler.outputPath, outname),
contents: contents
});
return file;
}