Adding Babel (ES6) to a legacy project being built with webpack

.babelrc

{
    // Enable all the features, including `::`-binding (ex, `setTimeout(::this.foo, 1000)`)
    "stage": 0
}

.eslintrc

// My complete eslintrc with the Babel-specific lines commented
{
  // Use the babel-eslint parser to support ES6
  "parser": "babel-eslint",
  // Add es6 features
  "ecmaFeatures": {
    "arrowFunctions": true,
    "binaryLiterals": true,
    "blockBindings": true,
    "classes": true,
    "defaultParams": true,
    "destructuring": true,
    "forOf": true,
    "generators": true,
    "modules": true,
    "objectLiteralComputedProperties": true,
    "objectLiteralDuplicateProperties": true,
    "objectLiteralShorthandMethods": true,
    "objectLiteralShorthandProperties": true,
    "octalLiterals": true,
    "regexUFlag": true,
    "regexYFlag": true,
    "spread": true,
    "superInFunctions": true,
    "templateStrings": true,
    "unicodeCodePointEscapes": true,
    "globalReturn": true,
  },
  "rules": {
    "strict": 0,
    "no-underscore-dangle": 0,
    "no-unused-vars": [1, {"args": "none"}],
    "curly": 0,
    "no-multi-spaces": 0,
    "key-spacing": 0,
    "no-return-assign": 0,
    "consistent-return": 0,
    "no-shadow": 0,
    "no-comma-dangle": 0,
    "no-use-before-define": 0,
    "no-empty": 0,
    "new-parens": 0,
    "no-cond-assign": 0,
    "quotes": 0,
    "camelcase": 0,
    "new-cap": 0,
    "no-undef": 1,
    "comma-dangle": 0,
    "space-infix-ops": 0,
    "no-loop-func": 0,
    "dot-notation": 0,
    "semi": 0,
    "semi-spacing": 1,
    "no-spaced-func": 0,
    "no-extra-semi": 0,
    "no-trailing-spaces": 1,
    "no-new-wrappers": 1,
    "no-alert": 1,
    "no-unused-expressions": 0,
    "comma-spacing": 0,
    "no-redeclare": 1,
    "no-sequences": 1,
    "no-debugger": 1,
    "eqeqeq": 0
  },
  "env": {
    "node": true,
    // Add es6 env
    "es6": true,
  },
  "globals": {
    "escape": true,
    "window": true,
    "document": true,
    "navigator": true,
    "location": true,
  }
}

README.rst

Adding Babel to a legacy Webpack project

1. Install babel (and eslint):

   $ npm install --save-dev babel babel-core babel-loader babel-eslint eslint eslint-loader
   

2. Add .babelrc and .eslintrc (if you want eslint, which you probably do)

3. Update your webpack config as above

4. Any .es6 file in your project will be built with babel! You can rename existing files, or just use it as you create new files.

5. Tell your editor that .es6 files are JavaScript (see javascript.vim)

javascript.vim

" Add to .vim/ftdetect/javascript.vim to treat .es6 files as JavaScript
" The vim-javascript package has up-to-date syntax definitions:
"     https://github.com/pangloss/vim-javascript

au BufNewFile,BufRead *.es6 setf javascript

webpack.config.js

var webpack = require('webpack');

module.exports = {
  ...,
  resolve: {
    ...,
    // Add .es6 to the set of extension that will be resolved
    // This means that `require('foo')` will find either `foo.js` or `foo.es6`
    extensions: ['', '.js', '.es6'],
  },
  module: {
    preLoaders: [
      // If you use eslint
      { test: /\.es6$/, loader: 'eslint-loader' },
    ],
    loaders: [
      ...,
      // Add the babel-loader
      { test: /\.es6$/, loader: 'babel' },
    ]
  },
};