Start with Webpack from jQuery

Question

in our team we want to migrate to ES6. We are using jQuery and many plugins, somes in pure javascript like interactjs, and others are totally adapted to jQuery.

We want to take the advantages os ES6 (classes, arrow functions, etc.), but I don't know how to start.

I have read the documentation but I don't know how to start with plugins, jQuery (I have read about React, Babel, but nothing for my case).

Thanks!

Answer 1

You can start with a simple webpack config taking your current js assets and bundling them with a babel loader. Install webpack, babel-loader, babel-core and babel-preset-es2015 via npm.

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './main.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
};

You can specify multiple entry points. This should be enough to get started. Next step you can add

1. Webpack-dev-server for development and hot module replacement
2. Production config with UglifyJS plugin for optimal build size
3. Bundle assets like fonts and image
4. Bundle css/scss with post-processor (e.g. autoprefixer)

The docs will be a great help on how to choose the best plugin, config, CLI flag, etc.