41.9K
26.6K
+ 1
750

What is Webpack?

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 63.7K GitHub stars and 8.9K GitHub forks. Here鈥檚 a link to Webpack's open source repository on GitHub

Who uses Webpack?

Companies
4355 companies reportedly use Webpack in their tech stacks, including Airbnb, Pinterest, and Instagram.

Developers
30115 developers on StackShare have stated that they use Webpack.

Webpack Integrations

JavaScript, Font Awesome, Gatsby, Buddy, and Gridsome are some of the popular tools that integrate with Webpack. Here's a list of all 26 tools that integrate with Webpack.
Pros of Webpack
308
Most powerful bundler
181
Built-in dev server with livereload
142
Can handle all types of assets
87
Easy configuration
22
Laravel-mix
4
Overengineered, Underdeveloped
2
Makes it easy to bundle static assets
2
Webpack-Encore
1
Redundant
1
Better support in Browser Dev-Tools
Decisions about Webpack

Here are some stack decisions, common use cases and reviews by companies and developers who chose Webpack in their tech stack.

Chauncey Kelly
Software Engineer at West Bend Mutual Insurance | 4 upvotes 路 47.6K views
Needs advice
on
FlowbiteFlowbite
and
Material-UIMaterial-UI

I'm looking for a library that can allow customization, relatively low effort integration with TypeScript, and ability to bring business users into the design process with a tool like Figma design. We are developing our own SDK for quick dev setup through Open API and build with Webpack and mustache templates. I know Flowbite comes with Typescript definition files out of the box but not nearly as supported as Material-UI. I need to understand what additional work having something that definitely will have long term support like Material UI converted into Typescript vs Flowbite that will have less support, but a typescript definition file out of the box, and what customizing components will do to the type definition files.

See more
Needs advice
on
gulpgulp
and
ParcelParcel

Hi, I am at a point when I discovered I need starter templates to kick off my web projects quickly and easily. I want to set-up my template code with the best or rather a packaging tool that is fast in compiling my Sass code and JS. Should I use gulp or Parcel or Webpack.

I need help please, A.S.A.P

See more
Giordanna De Gregoriis
Jr Fullstack Developer at Stefanini Inspiring | 8 upvotes 路 400.5K views
Needs advice
on
Nuxt.jsNuxt.js
and
Vue.jsVue.js

TL;DR: Shall I keep developing with Nuxt.js 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

Long version: We have an old web application running on AngularJS and Bootstrap for frontend. It is mostly a user interface to easily read and post data to our engine.

We want to redo this web application. Started from scratch using the newest version of Angular 2+ and Material Design for frontend. We haven't even finished rewriting half of the application and it is becoming dreadful to work on.

  • The cold start takes too much time
  • Every little change reload the whole page. Seconds to minutes of development lost looking at a loading blank page just changing css
  • Code maintainability is getting worse... again... as the application grows, since we must create everytime 5 files for a new page (html, component.ts, module.ts, scss, routing.ts)

I'm currently trying to code a Proof of Concept using Nuxt.js and Tailwind CSS. But the thing is, Vue.js 3 is out and has interesting features such as the composition API, teleport and fragments. Also we wish to use the Vite frontend tooling, to improve our time developing regardless of our application size. It feels like a better alternative to Webpack, which is what Nuxt 2 uses.

I'm already trying Nuxt.js with the nuxt-vite experimental module, but many nuxt modules are still incompatible from the time I'm posting this. It is also becoming cumbersome not being able to use teleport or fragments, but that can be circumvented with good components.

What I'm asking is, what should be the wisest decision: keep developing with Nuxt 2 and wait for a migration guide to Nuxt 3? Or start developing with Vue.js 3 using Vite, and then migrate to Nuxt 3 when it comes out?

See more
Weverton Timoteo

I find myself struggling trying to use a specific minified CSS file under node_modules for Milligram in Phoenix Framework using Webpack. First I thought that I need to define a resolve entry in my webpack.config.js as described in css-loader docs.

Then, I've discovered that I can simply use this Webpack notation in my manifest file (app.scss):

@import '~milligram/dist/milligram.min';

As described in docs:

To import assets from a node_modules path (include resolve.modules) and for alias, prefix it with a ~

Note that if you have other Webpack loaders, it will expand your CSS file in development mode.

See more
Joshua Dean K眉pper
CEO at Scrayos UG (haftungsbeschr盲nkt) | 7 upvotes 路 445K views

For our internal team and collaboration panel we use Nuxt.js (with TypeScript that is transpiled into ES6), Webpack and npm. We enjoy the opinionated nature of Nuxt.js over vanilla Vue.js, as we would end up using all of the components Nuxt.js incorporates anyways and we can adhere to the conventions setup by the Nuxt.js project, which allows us to get better support in case we run into any dead ends. Webpack allows us to create reproducable builds and also debug our application with hot reloads, which greately increased the pace at which we are able to perform and test changes. We also incorporated a lot of testing (ESLint, Chai, Jasmine, Nightwatchjs) into our pipelines and can trigger those jobs through GitLab CI. All packages are fetched through npm, so that we can keep our git repositories slim and are notified of new updates aswell as reported security flaws.

See more
Shared insights
on
GitHubGitHub
at

Github Actions has been a breeze to work with. Github Actions offers a nice CI/CD service right inside the Github environment itself. It comes with tight integration with Github. Github Actions workflows are triggered based on a variety of events, such as: commit, pull request, comment...etc.

At Cereo, we serve our Webpack bundle from Amazon S3 and Amazon CloudFront. We're using Github Actions to build bundles, upload them to S3, and invalidate Cloudfront cache. Our codebase is a monorepo with multiple apps. Github Actions lets us check updates using paths so that we can limit executions. Sometimes a pull request still triggers multiple workflows, but we get to run them concurrently with Github Actions. In fact, Github Actions can run up to 20 concurrent jobs.

That being said, don't try to change your entire CI/CD solution in one afternoon. Github Actions is still new to the market. Start small and build your new shiny CI system up.

#CI #ContinuousIntegration #ContinuousDelivery

See more

Webpack's Features

  • Bundles ES Modules, CommonJS, and AMD modules (even combined)
  • Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time)
  • Dependencies are resolved during compilation, reducing the runtime size
  • Loaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc
  • Highly modular plugin system to do whatever else your application requires

Webpack Alternatives & Comparisons

What are some alternatives to Webpack?
gulp
Build system automating tasks: minification and copying of all JavaScript files, static images. More capable of watching files to automatically rerun the task when a file changes.
Babel
Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support.
Parcel
Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.
Browserify
Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
Grunt
The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a task runner can do most of that mundane work for you鈥攁nd your team鈥攚ith basically zero effort.
See all alternatives

Webpack's Followers
26556 developers follow Webpack to keep up with related blogs and decisions.