Announcing the new webpack CLI

Even Stensberg
May 7, 2017 · 3 min read

After getting feedback from the community about webpack being hard to get started with, we listened and decided to re-envision the CLI for webpack. Although much of the logic from the old CLI was kept, a set of new features have been added: init and migrate.

Reducing webpack confusion through scaffolding

As part of the new CLI, we’re unveiling a new feature aimed at improving the webpack user experience. While webpack is an excellent module bundling tool, it’s also hard for beginners to get started with. What defaults make the most sense? To solve this problem, we’re introducing a new scaffolding system. It’s extensive and aims to remove the burden from getting started with webpack.

For beginners especially, getting the most out of webpack often result in negative results. To solve for this problem, we decided to roll out an extensive scaffold system, which is feature rich and removes some burden from the user.

At its core, the scaffold system is all about flexibility. An author of an scaffold(referred to as an addon), decides how to provide a webpack.config.js.

To learn more about how to create an addon, we’ve made a small demo, of which, covers how you could make a scaffold yourself. Here’s a few commands for you to test the scaffolding system.

webpack-cli init
webpack-cli init webpack-addons-demo

The scaffolding system has opportunities for you as an author to add options such as entry, output and other properties that are supported in webpack. You can provide your own name for your configuration, decide what dependencies to include, and split your logic using webpack-merge.

If you want read more about creating addon, read our docs!

Making it easier to migrate from v1 to v2

Another feature we’ve added, is migrate. As webpack v2 came with some changes that might have been hard to digest for some, we’ve decided to unload some more burden from the users backs. The migrate feature is a great way to transition your existing v1 configuration to v2, and aims to assist you when moving to webpack v2.

Try it yourself!

webpack-cli migrate webpack.config.js

Developing the new CLI & Future

We started discussing the current situation of the CLI in early December. The CLI team spent a lot of time planning how the scaffolding system would look, discussion of features of the CLI and some thinkering with early prototypes.

By January, the team worked on migrate and an early version of init, that consisted of a yeoman-like generator. To avoid the issue of slow execution time for the init feature, using yeoman as a core concept of the scaffolding system was proposed. It turned out to be great!

In a later version of the CLI, we are expecting to provide a way to use yeoman generators along with the features from the CLI, so that users can combine a webpack scaffold with other ones too, such as babel.

The team also decided that it would be best to make good use of AST’s for both migrate and init, using jscodeshift. Furthermore, we’re making good use of prettier, yeoman and jest.

After feedback from the community (yes, we’d love that!), we are proceeding to replace and remove the old CLI with an improved version.

The CLI is getting integrated into webpack soon, which means you will be using webpack init instead of webpack-cli init. We are also extending the scaffolding system, which will allow users to add properties to their webpack.config.js on the fly, while we are fixing potential bugs with migrate and init.

Image for post
Image for post
We’re always looking for more contributors. If you want to get involved, reach out to us!

Developing the new CLI has been time consuming and challenging. I would like to use this opportunity to thank Addy Osmani, Andrey Okonetchnikov, Pavithra Kodmad, Sean T. Larkin, Tobias Koppers, Juho Vepsäläinen and the rest of the core team for their hard work, guidance and contributions.

A special thanks to the yeoman core team, the authors behind jest, prettier and jscodeshift for making such great tools!

npm install -g webpack-cli

We look forward to see what you build with the new CLI! 🎉

webpack

The official Medium publication for the webpack open source…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store