Alternatives to Webpack logo

Alternatives to Webpack

gulp, Babel, Parcel, Browserify, and Grunt are the most popular alternatives and competitors to Webpack.
12K
8.2K
+ 1
740

What is Webpack and what are its top alternatives?

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Webpack is a tool in the JS Build Tools / JS Task Runners category of a tech stack.
Webpack is an open source tool with 52.6K GitHub stars and 6.7K GitHub forks. Here鈥檚 a link to Webpack's open source repository on GitHub

Webpack alternatives & related posts

related gulp posts

Tom谩拧 Pusteln铆k
Tom谩拧 Pusteln铆k
JavaScript
JavaScript
jQuery
jQuery
gulp
gulp
Webpack
Webpack

I use JavaScript these days and for few years I didn't have to use jQuery at all. I used to use it back in the days when IE8 and similar was a thing. But due to better browser support of native functions for DOM manipulation I could move to vanilla JavaScript. Most of the time, that's all I need to work with modals/accordions and similar. But I'm not saying that jQuery is bad. It was, and still is a great tool. Some of it's features are available in all browsers nowadays so it is not so important as it used to be. But jQuery has still advantage for example in it's selector engine, some DOM selections which are easy in jQuery are a bit more difficult in vanilla JS (you have to create some helper functions or use some 3rd party library to help you with that), but to be honest I needed this on very few occasions. So it really depends on your project (supported browses, plain JS or some bundling - gulp, Webpack, whether you plan to use modules etc.). Hope this helps.

See more
Gustavo Mu帽oz
Gustavo Mu帽oz
Web UI Developer at Globant | 4 upvotes 183.2K views
Webpack
Webpack
Grunt
Grunt
gulp
gulp
Parcel
Parcel
#Merge
#WebPackDevServer

Using Webpack is one of the best decision ever. I have used to Grunt and gulp previously, but the experience is not the same, and despite I know there are other bundlers like Parcel, Webpack gives me the perfect balance between automatization and configuration. The ecosystem of tools and loaders is amazing, and with WebPack #merge, you can modularize your build and define standard pieces to assemble different build configurations. I don't like processes where you cannot see their guts, and you have to trust in magic a little bit too much for my taste. But also I don't want to reinvent the wheel and lose too much time configuring my build processes. And of course, I love #WebPackDevServer and hot reloading.

See more
Babel logo

Babel

5.7K
3.8K
384
5.7K
3.8K
+ 1
384
Use next generation JavaScript, today.
Babel logo
Babel
VS
Webpack logo
Webpack

related Babel posts

Jonathan Pugh
Jonathan Pugh
Software Engineer / Project Manager / Technical Architect | 19 upvotes 441.1K views
Framework7
Framework7
JavaScript
JavaScript
TypeScript
TypeScript
Figma
Figma
Visual Studio Code
Visual Studio Code
Webpack
Webpack
Babel
Babel
Ruby
Ruby
HTML5
HTML5
CouchDB
CouchDB
Pouchdb
Pouchdb
Font Awesome
Font Awesome
Apache Cordova
Apache Cordova
CSS 3
CSS 3
PhoneGap
PhoneGap
#Css
#CSS3
#SCSS
#Sass
#Less
#Electron
#HandleBars
#Template7
#Sketch
#GraphQL
#HTML5
#GraphCool

I needed to choose a full stack of tools for cross platform mobile application design & development. After much research and trying different tools, these are what I came up with that work for me today:

For the client coding I chose Framework7 because of its performance, easy learning curve, and very well designed, beautiful UI widgets. I think it's perfect for solo development or small teams. I didn't like React Native. It felt heavy to me and rigid. Framework7 allows the use of #CSS3, which I think is the best technology to come out of the #WWW movement. No other tech has been able to allow designers and developers to develop such flexible, high performance, customisable user interface elements that are highly responsive and hardware accelerated before. Now #CSS3 includes variables and flexboxes it is truly a powerful language and there is no longer a need for preprocessors such as #SCSS / #Sass / #less. React Native contains a very limited interpretation of #CSS3 which I found very frustrating after using #CSS3 for some years already and knowing its powerful features. The other very nice feature of Framework7 is that you can even build for the browser if you want your app to be available for desktop web browsers. The latest release also includes the ability to build for #Electron so you can have MacOS, Windows and Linux desktop apps. This is not possible with React Native yet.

Framework7 runs on top of Apache Cordova. Cordova and webviews have been slated as being slow in the past. Having a game developer background I found the tweeks to make it run as smooth as silk. One of those tweeks is to use WKWebView. Another important one was using srcset on images.

I use #Template7 for the for the templating system which is a no-nonsense mobile-centric #HandleBars style extensible templating system. It's easy to write custom helpers for, is fast and has a small footprint. I'm not forced into a new paradigm or learning some new syntax. It operates with standard JavaScript, HTML5 and CSS 3. It's written by the developer of Framework7 and so dovetails with it as expected.

I configured TypeScript to work with the latest version of Framework7. I consider TypeScript to be one of the best creations to come out of Microsoft in some time. They must have an amazing team working on it. It's very powerful and flexible. It helps you catch a lot of bugs and also provides code completion in supporting IDEs. So for my IDE I use Visual Studio Code which is a blazingly fast and silky smooth editor that integrates seamlessly with TypeScript for the ultimate type checking setup (both products are produced by Microsoft).

I use Webpack and Babel to compile the JavaScript. TypeScript can compile to JavaScript directly but Babel offers a few more options and polyfills so you can use the latest (and even prerelease) JavaScript features today and compile to be backwards compatible with virtually any browser. My favorite recent addition is "optional chaining" which greatly simplifies and increases readability of a number of sections of my code dealing with getting and setting data in nested objects.

I use some Ruby scripts to process images with ImageMagick and pngquant to optimise for size and even auto insert responsive image code into the HTML5. Ruby is the ultimate cross platform scripting language. Even as your scripts become large, Ruby allows you to refactor your code easily and make it Object Oriented if necessary. I find it the quickest and easiest way to maintain certain aspects of my build process.

For the user interface design and prototyping I use Figma. Figma has an almost identical user interface to #Sketch but has the added advantage of being cross platform (MacOS and Windows). Its real-time collaboration features are outstanding and I use them a often as I work mostly on remote projects. Clients can collaborate in real-time and see changes I make as I make them. The clickable prototyping features in Figma are also very well designed and mean I can send clickable prototypes to clients to try user interface updates as they are made and get immediate feedback. I'm currently also evaluating the latest version of #AdobeXD as an alternative to Figma as it has the very cool auto-animate feature. It doesn't have real-time collaboration yet, but I heard it is proposed for 2019.

For the UI icons I use Font Awesome Pro. They have the largest selection and best looking icons you can find on the internet with several variations in styles so you can find most of the icons you want for standard projects.

For the backend I was using the #GraphCool Framework. As I later found out, #GraphQL still has some way to go in order to provide the full power of a mature graph query language so later in my project I ripped out #GraphCool and replaced it with CouchDB and Pouchdb. Primarily so I could provide good offline app support. CouchDB with Pouchdb is very flexible and efficient combination and overcomes some of the restrictions I found in #GraphQL and hence #GraphCool also. The most impressive and important feature of CouchDB is its replication. You can configure it in various ways for backups, fault tolerance, caching or conditional merging of databases. CouchDB and Pouchdb even supports storing, retrieving and serving binary or image data or other mime types. This removes a level of complexity usually present in database implementations where binary or image data is usually referenced through an #HTML5 link. With CouchDB and Pouchdb apps can operate offline and sync later, very efficiently, when the network connection is good.

I use PhoneGap when testing the app. It auto-reloads your app when its code is changed and you can also install it on Android phones to preview your app instantly. iOS is a bit more tricky cause of Apple's policies so it's not available on the App Store, but you can build it and install it yourself to your device.

So that's my latest mobile stack. What tools do you use? Have you tried these ones?

See more
Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 17 upvotes 275.4K views
Webpack
Webpack
Node.js
Node.js
Yarn
Yarn
npm
npm
Babel
Babel
Prettier
Prettier
ESLint
ESLint
#ES6
#ES5

So when starting a new project you generally have your go to tools to get your site up and running locally, and some scripts to build out a production version of your site. Create React App is great for that, however for my projects I feel as though there is to much bloat in Create React App and if I use it, then I'm tied to React, which I love but if I want to switch it up to Vue or something I want that flexibility.

So to start everything up and running I clone my personal Webpack boilerplate - This is still in Webpack 3, and does need some updating but gets the job done for now. So given the name of the repo you may have guessed that yes I am using Webpack as my bundler I use Webpack because it is so powerful, and even though it has a steep learning curve once you get it, its amazing.

The next thing I do is make sure my machine has Node.js configured and the right version installed then run Yarn. I decided to use Yarn because when I was building out this project npm had some shortcomings such as no .lock file. I could probably move from Yarn to npm but I don't really see any point really.

I use Babel to transpile all of my #ES6 to #ES5 so the browser can read it, I love Babel and to be honest haven't looked up any other transpilers because Babel is amazing.

Finally when developing I have Prettier setup to make sure all my code is clean and uniform across all my JS files, and ESLint to make sure I catch any errors or code that could be optimized.

I'm really happy with this stack for my local env setup, and I'll probably stick with it for a while.

See more
Parcel logo

Parcel

374
68
8
374
68
+ 1
8
馃摝馃殌 A fast, zero configuration web application bundler
Parcel logo
Parcel
VS
Webpack logo
Webpack

related Parcel posts

Gustavo Mu帽oz
Gustavo Mu帽oz
Web UI Developer at Globant | 4 upvotes 183.2K views
Webpack
Webpack
Grunt
Grunt
gulp
gulp
Parcel
Parcel
#Merge
#WebPackDevServer

Using Webpack is one of the best decision ever. I have used to Grunt and gulp previously, but the experience is not the same, and despite I know there are other bundlers like Parcel, Webpack gives me the perfect balance between automatization and configuration. The ecosystem of tools and loaders is amazing, and with WebPack #merge, you can modularize your build and define standard pieces to assemble different build configurations. I don't like processes where you cannot see their guts, and you have to trust in magic a little bit too much for my taste. But also I don't want to reinvent the wheel and lose too much time configuring my build processes. And of course, I love #WebPackDevServer and hot reloading.

See more

related Browserify posts

Yunus 脰ZCAN
Yunus 脰ZCAN
Founder at Appitr | 1 upvotes 37.8K views
atAppitrAppitr
JavaScript
JavaScript
ES6
ES6
React Native
React Native
Monaco Editor
Monaco Editor
Browserify
Browserify
Webpack
Webpack
Sequelize
Sequelize
npm
npm
Node.js
Node.js
ExpressJS
ExpressJS
Babel
Babel
Flow (JS)
Flow (JS)
ESLint
ESLint
MobX
MobX
GraphQL
GraphQL

Appitr Run JavaScript ES6 with React Native in the browser built on Monaco Editor, Browserify Webpack Sequelize npm Node.js ExpressJS Babel Flow Type ESLint MobX GraphQL

See more
Grunt logo

Grunt

3.8K
2.5K
713
3.8K
2.5K
+ 1
713
The JavaScript Task Runner
Grunt logo
Grunt
VS
Webpack logo
Webpack

related Grunt posts

Gustavo Mu帽oz
Gustavo Mu帽oz
Web UI Developer at Globant | 4 upvotes 183.2K views
Webpack
Webpack
Grunt
Grunt
gulp
gulp
Parcel
Parcel
#Merge
#WebPackDevServer

Using Webpack is one of the best decision ever. I have used to Grunt and gulp previously, but the experience is not the same, and despite I know there are other bundlers like Parcel, Webpack gives me the perfect balance between automatization and configuration. The ecosystem of tools and loaders is amazing, and with WebPack #merge, you can modularize your build and define standard pieces to assemble different build configurations. I don't like processes where you cannot see their guts, and you have to trust in magic a little bit too much for my taste. But also I don't want to reinvent the wheel and lose too much time configuring my build processes. And of course, I love #WebPackDevServer and hot reloading.

See more

related npm posts

Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 17 upvotes 275.4K views
Webpack
Webpack
Node.js
Node.js
Yarn
Yarn
npm
npm
Babel
Babel
Prettier
Prettier
ESLint
ESLint
#ES6
#ES5

So when starting a new project you generally have your go to tools to get your site up and running locally, and some scripts to build out a production version of your site. Create React App is great for that, however for my projects I feel as though there is to much bloat in Create React App and if I use it, then I'm tied to React, which I love but if I want to switch it up to Vue or something I want that flexibility.

So to start everything up and running I clone my personal Webpack boilerplate - This is still in Webpack 3, and does need some updating but gets the job done for now. So given the name of the repo you may have guessed that yes I am using Webpack as my bundler I use Webpack because it is so powerful, and even though it has a steep learning curve once you get it, its amazing.

The next thing I do is make sure my machine has Node.js configured and the right version installed then run Yarn. I decided to use Yarn because when I was building out this project npm had some shortcomings such as no .lock file. I could probably move from Yarn to npm but I don't really see any point really.

I use Babel to transpile all of my #ES6 to #ES5 so the browser can read it, I love Babel and to be honest haven't looked up any other transpilers because Babel is amazing.

Finally when developing I have Prettier setup to make sure all my code is clean and uniform across all my JS files, and ESLint to make sure I catch any errors or code that could be optimized.

I'm really happy with this stack for my local env setup, and I'll probably stick with it for a while.

See more
Nitzan Shapira
Nitzan Shapira
at Epsagon | 12 upvotes 148.5K views
atEpsagonEpsagon
Python
Python
Serverless
Serverless
npm
npm
Node.js
Node.js
Go
Go
Java
Java
GitHub
GitHub
AWS Lambda
AWS Lambda

At Epsagon, we use hundreds of AWS Lambda functions, most of them are written in Python, and the Serverless Framework to pack and deploy them. One of the issues we've encountered is the difficulty to package external libraries into the Lambda environment using the Serverless Framework. This limitation is probably by design since the external code your Lambda needs can be usually included with a package manager.

In order to overcome this issue, we've developed a tool, which we also published as open-source (see link below), which automatically packs these libraries using a simple npm package and a YAML configuration file. Support for Node.js, Go, and Java will be available soon.

The GitHub respoitory: https://github.com/epsagon/serverless-package-external

See more
RequireJS logo

RequireJS

5.6K
1K
307
5.6K
1K
+ 1
307
JavaScript file and module loader
RequireJS logo
RequireJS
VS
Webpack logo
Webpack
Angular CLI logo

Angular CLI

243
184
0
243
184
+ 1
0
A command line interface for Angular
    Be the first to leave a pro
    Angular CLI logo
    Angular CLI
    VS
    Webpack logo
    Webpack

    related Angular CLI posts

    Angular 2
    Angular 2
    Angular CLI
    Angular CLI
    TypeScript
    TypeScript
    Visual Studio Code
    Visual Studio Code
    Babel
    Babel
    Webpack
    Webpack

    Picked Angular 2 as framework since Angular CLI made it easy to get started on a self-contained frontend web project with TypeScript for easier development -- thanks to intellisense extensions for Visual Studio Code, hassle-free browser compatibility with the built-in Babel transpiler and packaging with the built-in Webpack configuration.

    See more
    rollup logo

    rollup

    64
    31
    5
    64
    31
    + 1
    5
    The next-generation JavaScript module bundler
    rollup logo
    rollup
    VS
    Webpack logo
    Webpack
    Webpacker logo

    Webpacker

    32
    29
    0
    32
    29
    + 1
    0
    Use Webpack to manage app-like JavaScript modules in Rails (by Rails)
      Be the first to leave a pro
      Webpacker logo
      Webpacker
      VS
      Webpack logo
      Webpack
      Laravel Elixir logo

      Laravel Elixir

      21
      22
      0
      21
      22
      + 1
      0
      It provides a clean, fluent API for defining basic Gulp tasks for your Laravel application
        Be the first to leave a pro
        Laravel Elixir logo
        Laravel Elixir
        VS
        Webpack logo
        Webpack
        System.js logo

        System.js

        10
        4
        2
        10
        4
        + 1
        2
        Dynamic ES module loader
        System.js logo
        System.js
        VS
        Webpack logo
        Webpack
        Backpack logo

        Backpack

        9
        18
        9
        9
        18
        + 1
        9
        Build Node.js backends with Webpack
        Backpack logo
        Backpack
        VS
        Webpack logo
        Webpack
        Just logo

        Just

        5
        7
        0
        5
        7
        + 1
        0
        A library that organizes build tasks for your JS projects
          Be the first to leave a pro
          Just logo
          Just
          VS
          Webpack logo
          Webpack
          Jetpack logo

          Jetpack

          5
          7
          0
          5
          7
          + 1
          0
          Webpack made more convenient
            Be the first to leave a pro
            Jetpack logo
            Jetpack
            VS
            Webpack logo
            Webpack
            Pingy CLI logo

            Pingy CLI

            3
            9
            6
            3
            9
            + 1
            6
            The Simple Front End Build Tool
            Pingy CLI logo
            Pingy CLI
            VS
            Webpack logo
            Webpack
            StealJS logo

            StealJS

            2
            2
            0
            2
            2
            + 1
            0
            A JavaScript dependency loader and builder
              Be the first to leave a pro
              StealJS logo
              StealJS
              VS
              Webpack logo
              Webpack
              Metro Bundler logo

              Metro Bundler

              2
              2
              0
              2
              2
              + 1
              0
              馃殗 The JavaScript bundler for React Native
                Be the first to leave a pro
                Metro Bundler logo
                Metro Bundler
                VS
                Webpack logo
                Webpack