Configuring Webpack to write JS with ES6/ES2015 on browser

You can use Webpack instead Grunt or Gulp on a lot of ways. It is a module bundler, that, without plugins, helps you to use AMD or CommonJS modules easily.

PS: This tutorial is about webpack v1. The newest version has some differences. Please, check the documentation on https://webpack.js.org/

First steps

Installing Webpack globally (you’ll must install NodeJS before):

[sudo] npm install -g webpack@1

After this, install webpack locally, inside your project:

npm install --save-dev webpack@1

The webpack.config.js file

Create a `webpack.config.js` file with the following content:

module.exports = {
  entry: 'main.js',
  output: {
    filename: 'bundle.js'
  }
};

That’s it! webpack is ready to be used. Now, we must create our `js` file (main.js):

console.log('webpack is working!');

Now, run this command on terminal:

webpack

It will be generated a `bundle.js` file on root of your project. That is the file that you must add on your index.html.

At this point, you can use AMD or CommonJS normally inside your `main.js` file: require, define, module.exports, etc. All this commands will be working well.

Installing ES6/2015 modules

Now, to use ES6/2015, install the following packages:

npm i --save-dev babel-core@6 babel-loader@6 babel-preset-es2015@6 babel-preset-stage-0@6

If you’ll use ReactJS, install `babel-preset-react` too:

npm i --save-dev babel-preset-react@6

Now, we‘ll change our `webpack.config.js` file, adding some options.

Configuring webpack.config.js

Firstly, we‘ll add source-maps, to debug more easily:

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map'
};

After that, we’ll add a `module` directive, to configure ES6 with Babel:

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
  }
};

Now, we need to add a `loaders` directive, that will load Babel modules:

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: []
  }
};

With loaders, we can add specific configurations, to specific file types. Our first configuration will be for all files that finish with `.js`:

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/
      }
    ]
  }
};

Every time that webpack find a `.js` file, the configuration inside that object will be used :)

Now, we’ll tell to webpack that it don’t must to look inside `node_modules` directory:

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/
      }
    ]
  }
};

And now, we need to use `babel loaders` to be able to use ES6/2015:

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      }
    ]
  }
};

The `query` entry is just to tell to webpack the following:

Load `babel-preset-es2015`, `babel-preset-stage-0` and`babel-preset-react`

We could write:

module.exports = {
  entry: './app/main.js',
  output: {
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-preset-es2015', 'babel-preset-stage-0', 'babel-preset-react']

      }
    ]
  }
};

that it works fine too.

If you don’t use ReactJS, just remove the last entry.

And done! We can run webpack using:

webpack

Or, if you want to watch for every change:

webpack --watch

And ES6/2015 is working! Using everything you want: import, export, class, arrow functions, let, const, spread operators, etc, etc, etc…

Do you want more?

Do you want to learn more about webpack? See the oficial documentation: http://webpack.github.io/docs/

If you want to learn more about ES6/2015 and/or Babel, you must read: http://babeljs.io/docs/learn-es2015/

Update (Jan 09, 2016):

Tip of ChillyPenguin: If you want to use ES6/2015 in your webpack config file, just rename it to `webpack.config.babel.js`, and install the package babel-register:

npm i --save-dev babel-register

That’s it! See ya!