I have been using Gulp for some years now but considered moving to Webpack in order to bundle JavsScript modules into a single transpiled file. Rather than replace all my Gulp tasks with Webpack (which personally, I find a little awkward), I instead opted to keep Gulp but using Webpack within a task when bundling JavaScript modules. This is pretty easy to setup, and give the best of both worlds in my opinion.
gulpfile.js
...
gulp.task('js', ['jest'], function() {
return gulp.src(JSES_SRC)
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('./dist/js'));
});
...
webpack.config.js
const path = require('path');
module.exports = {
entry: {
"global": './src/js/global.bundle.js',
//...
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist/js')
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}],
},
mode: 'development',
devtool: 'inline-source-map'
}