Webpack-cli: [UI] Features list for webpack ui

[rishabh3112]

Is your feature request related to a problem? Please describe.
As we are working on the designs at #654. It would be awesome if we actually think what all features would be part of our UI for better designs. Few upon which I would like to have and take review of the community are:

1. Project Initialisation : Creating new project either using default questions or using custom scaffolders on npm

2. Modification of webpack configs: Add, update delete segments in webpack configs. Also adding plugins and loaders.

3. Sharable webpack projects ( webjet? ): User would be able to save reponses to the answers and would be able scaffold project using this file. Also They can share that with other developers to scaffold on the go,

4. Install npm packages and run npm scripts: Not related to webpack as such but would be great to have.

5. webpack stats and dashboard

Describe the solution you'd like
I would love to work on them during summer :) taking community feedback so that UI would be more helpful for all.

Describe alternatives you've considered
N/A.

Additional context
1st point is in progress at #756.
cc @dhruvdutt @ematipico @evenstensberg

[misterdev]

Hi @rishabh3112, that's a nice set of features. I really like 4 and 5 :)

I think it could be interesting to mention:

1. Quick contextual references to the documentation
2. Config validation, warning you in case of errors
3. Auto reload when the configurations are modified

Also, what do you think about having:

• Node API for programmatic usage
• A pluggable API allowing for the creation of plugins/extensions

I'm not much convinced about point 3, the sharable scaffolds, I don't see many use cases for that.

[misterdev]

One last thing, is it going to be a global UI or every project will have its own instance?
I imagine it to be global, in this case I think it should also allow to:

• List and switch projects
• Create or import project

It seems a big project, I'm applying for another one for the summer but it would have been nice to work on this with you ;)

[rishabh3112]

Node API for programmatic usage
A pluggable API allowing for the creation of plugins/extensions

I have that in place :)

We are now focusing on getting init done first so will do project management after that.

Thanks for the feedback :+1:

[ktopouzi]

Hey guys, very interesting topic here and a very cool suggestions by everyone. The idea of having a UI where you can take a look at your project is clearly a great addition to the CLI. Vue has a beautiful interface for that and I believe this is a great starting point.

I would suggest charts flows, statistics for your current project where you can see the relationship between your files | file size etc.

I am really excited about this and having recently discovered Webpack makes it even better. It is for sure a big project as already mentioned but it would be great to work on that during summer.

[mgroovyank]

Hi @rishabh3112 , great features. I am participating in GSoC 2019 and I want to just share my idea about the init UI.
I think if you plan to create an interface like the one below:

This interface is better than asking questions because even to answer any question, the developer needs to have basic understanding of webpack functioning. So if we assume that before using webpack he has read the basics in webpack documentation then, he can use this interface easily, thus eliminating the need for a questionnaire.

This visual interface will be fine in such a case .No need for any questions.
You might want to think about this otherwise as it was proposed in the meeting ,the same questionnaire with a rough UI is great.

[Akryum]

I'm not sure everyone reads the whole documentation if at all before starting using Webpack.

[mgroovyank]

Just to clarify, I'm not referring to the whole documentation but atleast this concepts page.

I am myself a beginner at using webpack and I read the documentation first, otherwise it wouldn't have been possible for me to start with webpack. Without documentation, I would've not been comfortable using it.

[rishabh3112]

Thanks guys for giving feedbacks 👍. Keep them coming 👌

I will summarise here what people in general want from all the channels feedbacks were taken:

1. Step by step help in creating configuration from scratch. Also, want to know how question would change config and _get more info on that like a snip from documentation_.

2. For modifying an already existing configuration, there should be a connect and play like interface. For example: https://dotconfig.xyz

3. Migration: Migrating configuration between different versions.

4. Dashboard: With stats for build, etc.

@evenstensberg want to add something here based on your views and reviews you have recieved from community?

[evenstensberg]

not yet

[misterdev]

What about having (also) an electron app version?

• It would remove the need to have a terminal window open all the time that just runs webpack-cli ui
• It would be easier to develop/maintain since we don't have to care about all the different browsers
• It would be slightly more accessible for beginners
• I would like to have a "webpack control panel" icon on my pc, possibly with some shortcuts like "restart" / "quit" / ?

I think that the UI (webpack control panel) would fit well into an app, but it requires some effort and is not essential.

What do you think about this? :)

[evenstensberg]

We can make it an electron app later but let's focus on a web page

[fokusferit]

I'd also like to add this tweet :

Anybody built a webpack config explorer yet?

One that would allow you to drop in your webpack config and it would annotate what the hell any of the options do and what other options are available based on documentation? - https://twitter.com/jevakallio/status/1115216512120442881

Might be interesting.

[rishabh3112]

Yeah, @fokusferit This feature is interesting to me too! Will try to accompany in the plan :)

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.