Announcing the new webpack CLI

Published in

webpack

3 min readMay 7, 2017

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.

Before

After

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.

Our roadmap

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.