webpack-babel-config-example.md

1. Instale as dependências:

yarn add webpack babel-core babel-loader babel-preset-env

2. Crie o arquivo de configuração do webpack:

touch webpack.config.js

3. Defina uma configuração simples:

const path = require('path')
const webpack = require('webpack')

const getUglify = env => (
  env === 'production' ? new webpack.optimize.UglifyJsPlugin() : () => null
)

module.exports = env => ({
  entry: './src/app/index.js',
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: 'app.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude:  /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: [
            'env',
            {
              targets: {
                'browsers': 'last 2 versions',
              },
            },
          ],
        },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(env),
      },
    }),
    getUglify(env),
  ]
})

4. Adicione alguns scripts ao seu package.json:

"scripts": {
  "build": "./node_modules/.bin/webpack --env development",
  "build:production": "./node_modules/.bin/webpack --env production",
}

5. Faça os bundles:

yarn build 
# output sem otimizaçao.

yarn build:production 
# output otimizado.