The year 2020 with webpack

After more than 160 merged PRs in webpack & webpack-cli together, here we are at the end of the open source journey 2020, seems yesterday that I wrote the first article before beginning my work for webpack, check it out if you want to have an overview about me and my project.

webpack-cli encapsulates all code related to CLI handling. It captures options and sends them to the webpack compiler. You can also find functionality for initializing a project, migrating between versions, generating templates for laoders and plugins.

Brief Overview of Changes

Today, I’ll share about what all happened in this little journey of webpack-cli. We’ll majorly talk about the overall work that happened during this phase and also about our findings from the learnings and experiences we had.

My contributions to webpack-cli

The major goals of my GSoC with the webpack CLI were completed. These goals were -

Importing flags from webpack core (webpack-cli#1630) -

webpack 5 provides API for cli-flags. This API consists of 230+ flags being exported from the core webpack itself. A list of all supported options can be found here.
It doesn’t handle a complete CLI solution. It’s intended to only handle arguments for a webpack config. Other things are provided by the CLI: --config --json etc.

Allowing support of negated flags (webpack-cli#1668) -

Added support of negative property for cli-flags. If we havenegative: true for — flag-namthen --no-flag-name is valid.

A few negated flags

Added Support of multiple types for --stats (webpack-cli#1627) -

— stats is a very popular option for webpack. It can accept both either a boolean value or a string value.
Now CLI supports webpack --stats means (stats: true) and webpack --stats normal means ( stats: ‘normal’).

Supporting multiple entries files via CLI (webpack-cli#1619) -

Now we can provide multiple entry files via CLI using -

• webpack --entry=a.js --entry=b.js
• webpack ./a.js ./b.js

Created WebpackCLITest Plugin (webpack-cli#1624) -

Testing plays an important role in software development. I created a plugin (WebpackCLITestPlugin) to make it easy for the developers to test their features/bug-fixes. The main purpose is to log the webpack options passed to the webpack compiler.

WebpackCLITestPlugin: logging compiler.options

Addition of — config-name flag (webpack-cli#1753)-

Webpack supports exporting multiple webpack configurations to run multiple compilers simultaneously. Consider the following config:

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  name: 'amd',
  entry: './app.js',
  mode: 'production',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  name: 'commonjs',
  entry: './app.js',
  mode: 'production',
}];

If you pass a name to --config-name flag, webpack will only build that specific configuration.

This option also supports selecting multiple configurations from a list of configurations.

And many more bug fixes and improvements …

I wish I could explain all the features and fixes I have implemented during GSoC but the list is huge. Though you can find a detailed version of my work during GSoC here.

Wrap Up

Working on big open-source projects and tough and exciting. The best part is having your work directly impacting hundreds of thousands of developers who use webpack.

Fact: webpack have over 11 million weekly downloads on npm

There are a lot of learnings that come along with experience and familiarity with the core team and community. Collaboration and team effort are key for the success of any large-scale project.

Community matters a lot. We should never forget the end goal of what we’re trying to solve and always listen to what the community needs and the concerns they share.

Adapting to existing code and following design patterns help maintain consistency throughout the application. Always write composable, maintainable, and loosely coupled code which makes scaling easy.

GSoC and webpack is probably the biggest breakthrough in my career. Can’t thank enough Google and webpack enough for giving me this amazing platform. This opportunity definitely has a very huge impact on me. It has allowed me to grow from an open-source contributor to an open-source maintainer.