search

webpack / webpack-cli

Webpack's Command Line Interface
https://webpack.js.org/api/cli
MIT License
2.56k stars 603 forks source link

[UI] Features list for webpack ui #784

Closed rishabh3112 closed 5 years ago

rishabh3112 commented 5 years ago

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 commented 5 years ago

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:

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

misterdev commented 5 years ago

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:

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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:

webpack ui

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 commented 5 years ago

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

mgroovyank commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

not yet

misterdev commented 5 years ago

What about having (also) an electron app version?

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 commented 5 years ago

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

fokusferit commented 5 years ago

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 commented 5 years ago

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

webpack-bot commented 5 years ago

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.