.babelrc

{
    "presets": ["es2015", "react"]
}

.eslintrc.yml

---
    extends: "airbnb"
    env:
        node: true
        browser: true
        jest: true
    settings:
        import/resolver:
            webpack:
                config: 'app/config/webpack.config.js'

packages.json

{
  "name": "infinite",
  "version": "0.0.1",
  "engines": {
    "node": "6.x"
  },
  "private": true,
  "description": "Infinite flux",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config app/config/webpack.config.js -p",
    "lint": "eslint src app/config --ext .js --ext .jsx",
    "lint:fix": "npm run lint -- --fix",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "watch": "webpack --config app/config/webpack.config.js --devtool source-map --debug --watch --display-error-details",
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/captainjojo/infinite.git"
  },
  "bugs": {
    "url": "https://github.com/captainjojo/infinite/issues"
  },
  "homepage": "https://github.com/captainjojo/infinite#readme",
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-jest": "^15.0.0",
    "babel-loader": "^6.2.5",
    "babel-preset-react": "^6.11.1",
    "eslint": "^3.2.0",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-import-resolver-webpack": "^0.8.0",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.2.1",
    "eslint-plugin-react": "^6.2.0",
    "jest": "^18.0.0",
    "react-test-renderer": "^15.3.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.18.0",
    "clean-webpack-plugin": "^0.1.14",
    "lodash": "^4.15.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0",
    "release-it": "^2.5.1",
    "webpack": "^v2.2.0-rc.3",
    "whatwg-fetch": "^2.0.0"
  },
  "jest": {
    "cacheDirectory": "var/jest",
    "coverageDirectory": "build/coverage/jest",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "transformIgnorePatterns": [
      "/node_modules/(?!o-.*)/"
    ],
    "moduleNameMapper": {
      "^actions(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/actions$1",
      "^components(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/components$1",
      "^containers(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/containers$1",
      "^helpers(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/helpers$1",
      "^lib(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/lib$1",
      "^reducers(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/reducers$1",
      "^store(.*)": "<rootDir>/src/AppBundle/Resources/scripts/js/react/store$1"
    },
    "testRegex": ".*.(test|spec).js[x]?$"
  }
}

webpack.config.js

const _ = require('lodash');
const fs = require('fs');
const resolve = require('path').resolve;
const webpack = require('webpack');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const env = process.env.NODE_ENV === 'prd' ? 'production' : 'development';
const root = `${__dirname}/../../`;
const paths = {
  assets: resolve(root, 'src/AppBundle/Resources/views/Assets/'),
  scripts: resolve(root, 'web/scripts/js'),
  context: resolve(root, 'src/AppBundle/Resources/scripts/js/'),
};

const manifestPlugin = (file, path) => ({
  apply: (compiler) => {
    compiler.plugin('done', (stats) => {
      fs.writeFileSync(
        resolve(path, file),
        JSON.stringify(
          _.mapValues(
            stats.toJson().assetsByChunkName,
            (chunk) => (env === 'development' ? chunk[0] : chunk)),
          null,
          '\t'
        )
      );
    });
  },
});

const config = {
  context: paths.context,
  entry: {
    /**
     * Contain all the vendors entries
     *
     * Vendors library (React, Lodash, ...)
     * Polyfills
     */
    vendor: [
      // Polyfills
      'core-js/es6/object',
      'core-js/es6/promise',
      'whatwg-fetch',

      // Vendors
      'lodash/isEqual',
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'redux-thunk',
    ],
    /**
     * Each of the following entries represent the single entrypoints
     * for a given page type
     */
    home: [
      'entrypoints/latest_news_home.jsx',
    ],
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules\/(?!o-.*)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', ['es2015', { modules: false }]],
        },
      },
    ],
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: paths.scripts,
  },
  performance: {
    hints: env === 'production' ? 'warning' : false,
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'inlined'],
      minChunks: Infinity,
    }),
    new CleanWebpackPlugin(['**'], {
      root: paths.scripts,
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(env),
      },
    }),
    manifestPlugin('manifest.json', resolve(root, 'var/webpack/')),
  ],
  resolve: {
    alias: {
      actions: 'react/actions',
      components: 'react/components',
      containers: 'react/containers',
      helpers: 'helpers',
      lib: 'lib',
      reducers: 'react/reducers',
      store: 'react/store',
    },
    extensions: ['.js', '.jsx'],
    modules: [
      'node_modules',
      './src/AppBundle/Resources/scripts/js',
    ],
  },
  target: 'web',
};

if (env === 'production') {
  config.plugins.push(
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    })
  );
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compress: {
        negate_iife: true,
        unused: true,
        dead_code: true,
        drop_console: true,
        warnings: false,
      },
      output: { comments: false },
    })
  );
}

module.exports = config;