Webpack configs

.elsintrc.js

let Base = {
    "extends": ["airbnb", "plugin:react/recommended"],
    "plugins": [
      "react"
    ],
    parser: "babel-eslint",
    parserOptions: {
      "ecmaVersion": 6,
      "sourceType": "module",
      ecmaFeatures: {
        jsx: true,
        experimentalObjectRestSpread: true,
        impliedStrict: true,
      }
    },
    "env": {
      es6: true,
      browser: true
    }
};

const baseRules = {
    /////////////////////
   // Possible Errors //
  /////////////////////
  "no-cond-assign": 2,
  "no-constant-condition": 2,
  "no-dupe-args": 2,
  "no-dupe-keys": 2,
  "no-duplicate-case": 2,
  "no-empty": 2,
  "no-ex-assign": 2,
  "no-extra-boolean-cast": 2,
  "no-extra-semi": 2,
  "no-func-assign": 2,
  "no-inner-declarations": 2,
  "no-invalid-regexp": 2,
  "no-irregular-whitespace": [2, {
    "skipComments": true,
    "skipTemplates": true
  }],
  "no-obj-calls": 2,
  "no-sparse-arrays": 2,
  "no-unreachable": 2,
  "use-isnan": 2,
  "valid-jsdoc": [2, { "requireReturn": false }],
  "valid-typeof": 2,
     ////////////////////
    // Best Practices //
   ////////////////////
  "accessor-pairs": 1,
  "array-callback-return": 2,
  "block-scoped-var": 2,
  "complexity": [1, 5],
  "curly": 2,
  "default-case": [2, { "commentPattern": "^skip\\sdefault" }],
  "dot-location": [2, "property"],
  "dot-notation": 2,
  "eqeqeq": [2, "allow-null"],
  "no-case-declarations": 2,
  "no-empty-function": 2,
  "no-extra-bind": 2,
  "no-fallthrough": 2,
  "no-floating-decimal": 2,
  "no-native-reassign": 2,
  "no-implied-eval": 2,
  "no-loop-func": 2,
  "no-magic-numbers": [2, {
    "ignore": [0, 1],
    "ignoreArrayIndexes": true,
    "enforceConst": false
  }],
  "no-multi-spaces": [2, {
    exceptions: {
      "VariableDeclarator": true,
      "ImportDeclaration": true
    }
  }],
  "no-new-wrappers": 2,
  "no-new": 2,
  "no-param-reassign": [2, { "props": false }],
  "no-proto": 2,
  "no-redeclare": 2,
  "no-return-assign": 2,
  "no-script-url": 2,
  "no-self-assign": 2,
  "no-self-compare": 2,
  "no-unmodified-loop-condition": 2,
  "no-useless-concat": 2,
  "no-warning-comments": 2,
  "vars-on-top": 2,
  "wrap-iife": 2,
  "yoda": [2, "never", {
    "exceptRange": true,
  }],
  "strict": [2, "global"],
  "no-undef-init": 2,
  "no-shadow": 2,
  "no-undef": 2,
  "no-unused-vars": ["error", { "varsIgnorePattern": "[iI]gnored" }],
  "no-use-before-define": 2,
  "array-bracket-spacing": [2, "never"],
  "global-require": 2,
  "handle-callback-err": 2,
  "no-mixed-requires": 2,
  "no-new-require": 2,
  "camelcase": 2,
  "block-spacing": 2,
  "brace-style": 2,
  "comma-dangle": [2, "never"],
  "comma-spacing": [ 2, {
    "before": false,
    "after": true
  }],
  "comma-style": 2,
  "consistent-this": [2, "ref"],
  "eol-last": 2,
  "no-spaced-func": 2,
  "indent": [2, "tab"],
  "func-style": [2, "declaration", { "allowArrowFunctions": true }],
  "id-blacklist": [2, "data", "err", "e", "cb", "callback"],
  "id-length": [2, {"min": 4, "max": 15 }],
  "jsx-quotes": [2, "prefer-single"],
  "key-spacing": [2, {
    "multiLine": {
      "beforeColon": true,
      "afterColon": true,
      "align": "colon",
      "mode": "minimum"
    },
    "singleLine": {
      "beforeColon": false,
      "afterColon": true,
      "mode": "minimum"
    }
  }],
  "keyword-spacing": [2, {
    "before": true,
    "after": true
  }],
  "lines-around-comment": [2, {
    "beforeBlockComment": true,
    "afterLineComment": true,
    "allowBlockStart": true
  }],
  "max-depth": [2, 4],
  "max-lines": [2, {
    "max": 300,
    "skipBlankLines": true,
    "skipComments": true
  }],
  "max-nested-callbacks": [2, 4],
  "max-params": [2, 3],
  "max-statements-per-line": [2, {"max": 1}],
  "max-statements": [2, 10],
  "newline-after-var": [2, "always"],
  "newline-before-return": 2,
  "newline-per-chained-call": [2, { "ignoreChainWithDepth": 2 }],
  "no-array-constructor": 2,
  "no-inline-comments": 2,
  "no-lonely-if": 2,
  "no-mixed-operators": 2,
  "no-mixed-operators": [2, {
    "allowSamePrecedence": true
  }],
  "no-mixed-spaces-and-tabs": [2, "smart-tabs"],
  "no-multiple-empty-lines": [2, {
    'max': 2,
    "maxEOF": 1
  }],
  "no-nested-ternary": 2,
  "no-unneeded-ternary": 2,
  "no-whitespace-before-property": 2,
  "object-property-newline": 2,
  "object-curly-newline": [2, {
    "ObjectExpression": "always",
    "ObjectPattern": { "multiline": true }
  }],
  "one-var-declaration-per-line": [2, "initializations"],
  "one-var": [2, {
    "var": "always",
    "let": "always",
    "const": "never",
    /*"uninitialized": "always",
    initialized: "never"*/
  }],
  "operator-assignment": [1, "always"],
  "padded-blocks": [2, "never"],
  "quotes": [2, "single", {"allowTemplateLiterals": true}],
  "require-jsdoc": [2, {
    "require": {
      "FunctionDeclaration": true,
      "MethodDefinition": true,
      "ClassDeclaration": true
    }
  }],
  "semi": [2, "never"], // http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding
  "space-infix-ops": 2,
  "spaced-comment": [2, "always", { "block": { "exceptions": ["-", "+", "*"] } }],
  "arrow-body-style": [2, "as-needed", { requireReturnForObjectLiteral: true }],
  "arrow-parens": [2, "always"],
  "arrow-spacing": 2,
  "constructor-super": 2,
  "no-const-assign": 2,
  "no-duplicate-imports": 2,
  "no-useless-computed-key": 2,
  "no-useless-constructor": 2,
  "no-useless-rename": 2,
  "object-shorthand": 2,
  "prefer-const": 2,
  "prefer-arrow-callback": 2,
  "prefer-template": 2,
  "template-curly-spacing": 2,
  "no-confusing-arrow": [1, {"allowParens": false}],
     /////////////////
    // React Rules //
   /////////////////
  "react/jsx-boolean-value": [2, "always"],
  "react/jsx-closing-bracket-location": [2, {selfClosing: "after-props", nonEmpty: "after-props"}],
  "react/jsx-curly-spacing": [2, "never", {"allowMultiline": false}],
  "react/jsx-max-props-per-line": [2, {maximum: 3}],
  "react/jsx-no-literals": 2,
  "react/self-closing-comp": 2,
  "react/sort-comp": 2,
  "react/jsx-indent": [2, 'tab'],
  "react/prop-types": [2, { ignore: ['children'] }],
  "react/sort-comp": 0,
  // temp, will re-enable soon.
  "react/prop-types": 0,
  // "import/no-extraneous-dependencies": 0,
  "import/no-unresolved": 0
};

const PROD = {
  "no-console": 2,
  "no-debugger": 2,
  "no-alert": 2
};

const DEV = {
  "no-console": 1,
  "no-debugger": 1,
  "no-alert": 1
};

const environment = (process.env.isProd == "true")
  ? "--=--=--=-- Production --=--=--=--"
  : "--=--=--=-- Development --=--=--=--";

const rules = (process.env.isProd == "true")
  ? Object.assign({}, baseRules, PROD)
  : Object.assign({}, baseRules, DEV);


Base.rules = rules;

module.exports = Base;

webpack.config.babel.js

import path               from 'path';
import precss             from 'precss';
import webpack            from 'webpack';
import autoprefixer       from 'autoprefixer';
import StyleLintPlugin    from 'stylelint-webpack-plugin';
import HtmlWebpackPlugin  from 'html-webpack-plugin';
import webpackLoadPlugins from 'webpack-load-plugins';
import ExtractTextPlugin  from 'extract-text-webpack-plugin';
import ProgressBarPlugin  from 'progress-bar-webpack-plugin';

const LAUNCH_COMMAND  = process.env.npm_lifecycle_event;
const isProd          = LAUNCH_COMMAND === 'production';

process.env.BABEL_ENV = LAUNCH_COMMAND;
process.env.LINT_ENV = LAUNCH_COMMAND;
process.env.isProd = isProd;

const PATHS = {
  app        : path.join(__dirname, 'app'),
  build      : path.join(__dirname, 'build'),
  scss       : path.join(__dirname, 'app/styles/scss'),
  utils      : path.join(__dirname, 'app/javascripts/utils'),
  config     : path.join(__dirname, 'app/javascripts/config'),
  actions    : path.join(__dirname, 'app/javascripts/actions'),
  reducers   : path.join(__dirname, 'app/javascripts/reducers'),
  components : path.join(__dirname, 'app/javascripts/components'),
  containers : path.join(__dirname, 'app/javascripts/containers'),
};

let progressBarConfig = new ProgressBarPlugin();
let styleLintConfig = new StyleLintPlugin({
  failOnError : true,
  syntax      : 'scss',
  configFile  : '.stylelintrc',
  files       : '**/*.s?(a|c)ss',
  context     : 'inherits from webpack',
});
let HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template : PATHS.app + '/index.html',
  filename : 'index.html',
  inject   : 'body'
});
let extractTextPluginConfig  = new ExtractTextPlugin("style.css", { allChunks : false });

const prodPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
});

const base = {
  entry: [
    // 'webpack-hot-middleware/client?reload=true',
    'babel-polyfill',
    PATHS.app
  ],
  output: {
    path     : PATHS.build,
    filename : "bundle.js"
  },
  module: {
    preLoaders: [{
      test    : /\.jsx$|\.js$/,
      loader  : 'eslint-loader',
      include : PATHS.app,
      exclude : /bundle\.js/
    }],
    loaders: [
      {
        test    : /\.jsx$|\.js$/,
        exclude : /node_modules/,
        loader  : "babel-loader"
      },
      {
        test   : /\.(scss|css)$/,
        loader : ExtractTextPlugin.extract("style","css?localIdentName=[name]__[local]___[hash : base64 : 5]&modules&importLoaders=1!postcss-loader!sass?outputStyle=expanded")
        // loader: "style!css!postcss-loader!sass?outputStyle=expanded"
        // loader : 'style!css!autoprefixer?browsers=last 3 versions!sass?outputStyle=expanded!postcss-loader'
      }
    ]
  },
  postcss: function () {
    return [autoprefixer, precss]
  },
  resolve: {
    root: path.resolve('./app'),
    extensions: ['', '.js', '.jsx'],
    alias: {
      '$styles'     : PATHS.scss,
      '$utils'      : PATHS.utils,
      '$config'     : PATHS.config,
      '$actions'    : PATHS.actions,
      '$reducers'   : PATHS.reducers,
      '$containers' : PATHS.containers,
      '$components' : PATHS.components,
    }
  }
};

const commonPlugins = [HTMLWebpackPluginConfig, progressBarConfig, extractTextPluginConfig];
// const commonPlugins = [HTMLWebpackPluginConfig, progressBarConfig, extractTextPluginConfig, styleLintConfig];

const prodConf = {
  devtool : 'cheap-module-source-map',
  plugins : commonPlugins.concat([prodPlugin])
};

const devConf = {
  devtool  : 'cheap-module-inline-source-map',
  devServer: {
    contentBase : PATHS.build,
    hot         : true,
    inline      : true,
    progress    : true
  },
  plugins: commonPlugins.concat([new webpack.HotModuleReplacementPlugin()])
};

export default Object.assign({}, base, isProd ? prodConf : devConf);