Skip to content

Software Engineer at Heydoc

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 |
                ||     ||

Comments

  • t
    thommorais

    I like this blog, just know that.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      Thank you so much! Stay tunes because more explainer posts are coming soon.

      Have a lovely day 🥑

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
  • H
    Hardik Satasiya

    its cool, simple and powerful thanks :)

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
  • l
    lenymo

    Thanks for sharing - this helped me get up and running with gulp + webpack.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
  • E
    Emanuel Saramago

    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...

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      Wow! Nice one! Thanks a lot for a link to a post under credits section Emanuel!

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
      • E
        Emanuel Saramago

        You're welcome! You've done half of the work ;)

        👆 you can use Markdown here

        Your comment is awaiting moderation. Thanks!
  • B
    Benjamin Intal

    Very useful for people starting out. It might be a good idea to use `babel-preset-env` now.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      Thanks for kind word. Yes — preset-env would be a great addition to this one. Thanks for visiting.

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!