Webpack: Meta-Language support built in (Sass, Pug, JSX, etc.)

[TheJaredWilcurt]

Someone suggested this in the Vue chat and it was a good idea:

There should be Meta-Language options when setting up a Webpack project.

Add Metalanguage support? (JSX, Sass, Pug, etc.) [y/N]: y

Press up and down to move, space to select/deselect, enter to confirm.

Markup Metalanguages Support:
 [x] Markdown
 [ ] HAML
 [ ] Pug

```
Style Metalanguages Support:
[x] Sass
[x] SCSS
[ ] Less
[ ] Stylus

Scripting Metalanguages Support:
[ ] JSX
[ ] TypeScript
[ ] Flow
[ ] CoffeeScript

You have chosen: Markdown, Sass, and SCSS.
Is that correct? [Y/n]

So out of the box I could go into the sample `Hello.vue` file and change this
```html
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

to this:

<style scoped lang="sass">
h1,
h2
    font-weight: normal

ul
    list-style-type: none
    padding: 0px

li
    display: inline-block
    margin: 0px 10px

a
    color: #42B983
</style>

Without any hassle or additional setup.

This seems like a pretty common need people would have. It should be covered by default to save everyone else all the time and effort.

[LinusBorg]

Generally speaking, we don't want to blow up the questionnaire during init too much, because nobody wants to answer two dozen quesitons, when your answer to most of them is "the default" anyway.
So new options should have a really noticable benefit.

Considering that today, all you have to do to make this work is to install the appropriate loaders, I'm not sure that there's a good enough benefit in this.

The only exception would be JSX, which requires additional babel-plugins and config, so I would be open to add a JSX option.

[TheJaredWilcurt]

@LinusBorg

Well there's a very easy solution to that; just have it ask

Add Metalanguage support? (JSX, Sass, Pug, etc.) [y/N]:

The default is no, so you can just skip it, but if you want metalanguage support, all of the loaders and dependencies can be handled for you in a manner that has been tested and known to work properly in the .vue single file components (lang attributes).

The whole point of a boilerplate is to give you everything you need to get up and running without having to set everything up yourself.

[maxmilton]

Rather than trying to include every possible 'meta language' here I prefer the current approach of including extensive details in the documentation. That way we can provide code samples and background information which is especially useful for new developers.

Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime.

[aladdin-add]

can we provide a option like something: "simple mode" vs "advanced mode":

• simple mode -- gives users the less option and most ofen used configure.
• advanced mode -- gives users more flexibility.

[TheJaredWilcurt]

@MaxMilton
Then why even make this repo. Why not just make a giant tutorial that explains how to do everything from scratch.

Because the point isn't to teach, it's to save people time. This is a common feature people would use, so it should just be built in. If people are not interested in it at all, they can just hit enter on the (y/N) to skip it. If they want it, why should they have to manually set it up everytime. Especially when there are stupid gotcha's like how sass doesn't mean sass it means scss, which is obviously something that can be smoothed out once here to save thousands of people the time to research and do trial and error to resolve the same confusing problem.

Yes, I can write my own helper functions from scratch too, but I go use a library to save me time. I don't need to reinvent the wheel to make an ajax request or convert CSV to JSON, etc. We use libraries and tools to save time. If someone wants to learn how to do this stuff on their own, there are plenty of resources. These templates/boilerplates are not the place for education, they exist to smooth onboarding and save time.

[TheJaredWilcurt]

@Aladdin-ADD

We already have this.

# Install the Vue CLI globally
npm install -g vue-cli

# See a list of available official templates
vue list

 * browserify
 * browserify-simple
 * pwa
 * simple
 * webpack
 * webpack-simple

# Use the advanced webpack installer (this repo)
vue init webpack 

# Use the simplified version
vue init webpack-simple

[aladdin-add]

Hmm.. I just saw the webpack-simple, and it is really simple -- I guess it is mostly for learning :(
can we add an option webpack-advanced, which gives more options to support meta-language and more? (I'm not sure about this, actually I can see both sides.)

# See a list of available official templates

vue list
 * webpack
 * webpack-simple
 * webpack-advanced
...

[TheJaredWilcurt]

What else would go in there. There's already multiple testing options in this version.

[arszp10]

I think that you need to create a new project, where there will be a choice typescript, flow, etc.

[LinusBorg]

Closing this as this will probably be addressed better with presets in The upcoming vue-cli 3