Using webpack with gulp.js
Webpack is a popular module bundler for modern JavaScript applications. Its biggest advantage is its flexibility — it can be as simple or as complicated as you need it to be. It doesn’t matter if you live on the edge and your app is full of modern ES2015 modules or still depends on some legacy code written in AMD style — this tool has you covered.
If I’m not working on a jsFuckingEverythingInMyWholeLife.js project I like to use gulp.js. It is a user friendly task runner that handles common tasks like: Sass compilation, media asset compression etc. However there is a chance that you may need to add a tiny bit of JavaScript functionality to a project. What’s the solution for this scenario?
webpack + gulp.js = <3
Let’s combine the simplicity of Gulp’s API with webpack to take advantage of a modern JavaScript workflow. Less talking, more coding…
npm i -D gulp webpack webpack-stream
// gulpfile.js
const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const webpackConfig = require('./webpack.config.js');
gulp.task('js', () => {
gulp.src('./src/js/index.js')
.pipe(webpackStream(webpackConfig), webpack)
.pipe(gulp.dest('./dist/js'));
});
That’s the Gulp task ready. Let’s tell webpack what to do now.
npm i -D babel-core babel-loader babel-preset-latest
// webpack.config.js
module.exports = {
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: [
['latest', { modules: false }],
],
},
},
],
},
};
This is just an example of a basic configuration file. From this point you can go crazy with your settings. To use the task now just run in terminal:
_________
< gulp js >
---------
\ ^__^
\ (@@)\_______
(__)\ )\/\
||----w |
|| ||
I like this blog, just know that.
Thank you so much! Stay tunes because more explainer posts are coming soon.
Have a lovely day 🥑
its cool, simple and powerful thanks :)
Thanks for sharing - this helped me get up and running with gulp + webpack.
Very useful article!
Based on it, I have made a boilerplate to compile Sass and bundle js, so everyone can try this solution: https://github.com/esaramag...
Wow! Nice one! Thanks a lot for a link to a post under credits section Emanuel!
You're welcome! You've done half of the work ;)
Very useful for people starting out. It might be a good idea to use `babel-preset-env` now.
Thanks for kind word. Yes — preset-env would be a great addition to this one. Thanks for visiting.