title: Unexpected token '@' when using ES6 decorators
body: <p>I have a React project setup and I'm trying to incorporate MobX into it. With that I have to use decorators i.e. </p>
  
  <pre><code>@observable
  </code></pre>
  
  <p>When I do that though I get the following error:</p>
  
  <p><a href="https://github.com/mobxjs/mobx" rel="nofollow noreferrer">https://github.com/mobxjs/mobx</a></p>
  
  <blockquote>
    <p>Module build failed: SyntaxError: Unexpected token (5:22)</p>
    
    <p>class ListStore {
        @observable items = ['Pete', 'John', 'Henry', 'Jeff', 'Bob'];
    }</p>
  </blockquote>
  
  <p>My Webpack config:</p>
  
  <pre><code>module.exports = {
      entry: './src/App.js',
      output: {
          path: __dirname,
          filename: 'app.js'
      },
      module: {
          loaders: [{
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel',
              query: {
                  presets: ['es2015', 'react'],
                  plugins: ['transform-decorators-legacy']
              }
          },
          {
              test: /\.scss?$/,
              exclude: /node_modules/,
              loaders: ['style', 'css', 'sass']
          }]
      }
  };
  </code></pre>
  
  <p>My ESLint config:</p>
  
  <pre><code>{
      "parserOptions": {
              "ecmaVersion": 6,
              "ecmaFeatures": {
                  "jsx": true
              },
              "sourceType": "module"
      },
      "env": {
              "browser": true,
              "node": true,
              "es6": false
      },
      "ecmaFeatures": {
              "modules": true
      },
      "rules": {
          "strict": [
              2,
              "global"
          ],
          "quotes": [
              2,
              "single"
          ],
          "indent": [
              2,
              4
          ],
          "eqeqeq": [
              2,
              "smart"
          ],
          "semi": [
              2,
              "always"
          ],
          "max-depth": [
              2,
              4
          ],
          "max-statements": [
              2,
              15
          ],
          "complexity": [
              2,
              5
          ]
      }
  }
  </code></pre>
  
  <p>As a note, I'm new to using Webpack as well as utilising ESLint, so this might very well be a newby question. However after doing research online I haven't find anything that's worked. (This includes installing the 'transform-decorators-legacy' Babel plugin).</p>