Add JSX integration for Vue.js

[Kocal]

Will close #551.
Doc: symfony/symfony-docs#11346

This PR enable JSX support in Vue.js with the following code:

Encore.enableVueLoader(() => {}, {
  useJsx: true
});

I've added inline documentation and some tests for:

• enableVueLoader() behavior (and validation)
• Babel loader rules generation
• Functional test, with styles and scoped styles (using CSS Modules)

As proof of concept for styles, after adding <link href="build/main.css" rel="stylesheet"> in generated testing.html file:

• Styles from App.css, App.scss and App.less are applied globally correctly
• Styles from Hello.css are applied correctly to Hello.jsx component only (import styles from './Hello.css?module')

This is an example of generated `main.css` file

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#app {
  display: flex;
  color: #2c3e90; }

#app {
  margin-top: 40px;
}

.h1_jKs9e, .h2_3H2pR {
  font-weight: normal;
}

.ul_3us5c {
  list-style-type: none;
  padding: 0;
}

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

.a_wKHXy {
  color: #42b983;
}

---

Some notes for the documentation:

• Install @vue/babel-preset-jsx and @babel/plugin-transform-react-jsx
• If you need to use scoped styles, use CSS Modules like this:

/* MyComponent.css */
.title { color: red }

// MyComponent.jsx
import styles from './MyComponent.css?module';

export default {
  name: 'MyComponent',
  render() {
    return (
      <div class={styles.title}>
        My component!
      </div>
    );
  }
};

• Not only CSS is supported for CSS Modules, Sass, Less and Stylus are supported too
• If you need to require an image, <img src="./assets/image.png"> will not work, you should require it yourself like <img src={require("./assets.image.png")}/>.

[Kocal]

I'm reverting this to prevent conflicts with https://github.com/symfony/webpack-encore/pull/550/files#diff-35a173566334465c73f4aebaff4cc9eb

[Lyrkan]

Hi @Kocal,

Thank you for working on that, really good PR :)

[Lyrkan]

Depending on when it will get merged we'll have to make sure those next lines will be part of the code block added here: https://github.com/symfony/webpack-encore/pull/550/files#diff-168726dbe96b3ce427e7fedce31bb0bcR1000

[weaverryan]

Ha! This is wonderful! I read all the docs first (great job, very complete), then read the docs in index.js and finally... realized that the actual implementation is almost no code! That's awesome!