ES2015 + glsl files + inline GLSL, with glslify on webpack 2

package.json

{
  "scripts": {
    "start": "webpack-dev-server",
    "build": "NODE_ENV=production webpack"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-glslify": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-es2015-webpack": "^6.4.3",
    "babel-preset-stage-1": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "envalid": "^2.4.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "flatten-vertex-data": "^1.0.0",
    "gl": "^4.0.3",
    "glsl-hsl2rgb": "^1.1.0",
    "glsl-noise": "0.0.0",
    "glslify": "^6.1.0",
    "glslify-loader": "^1.0.2",
    "howler": "^2.0.3",
    "html-webpack-plugin": "^2.24.1",
    "jimp": "^0.2.27",
    "layout-bmfont-text": "^1.3.4",
    "lerp": "^1.0.3",
    "load-bmfont": "^1.3.0",
    "lodash-es": "^4.17.4",
    "node-sass": "^4.5.2",
    "pngjs": "^3.0.1",
    "quad-indices": "^2.0.1",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "script-ext-html-webpack-plugin": "^1.7.1",
    "strip-loader": "^0.1.2",
    "style-loader": "^0.16.1",
    "three": "^0.85.2",
    "three-bmfont-text": "^2.2.1",
    "tween.js": "^16.6.0",
    "uglify-js": "^2.8.12",
    "uglifyjs-webpack-plugin": "^0.3.0",
    "webpack": "^2.6.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-dev-server": "^2.5.0"
  },
  "dependencies": {
    "geo-3d-box": "^2.0.2",
    "gl-mat4": "^1.1.4",
    "gl-vec3": "^1.0.3",
    "glsl-random": "^0.0.5",
    "minivents": "^2.0.2",
    "noop2": "^2.0.0",
    "perlin-simplex": "^0.0.2",
    "present": "^1.0.0",
    "primitive-plane": "^1.1.0",
    "redux": "^3.6.0",
    "regl": "^1.3.0",
    "scrollmagic": "^2.0.5",
    "stats.js": "^0.17.0",
    "three-text2d": "^0.3.0",
    "three.meshline": "^1.0.1",
    "whs": "^2.0.0-beta.9.1",
    "whs-module-loader": "^0.1.0",
    "window-or-global": "^1.0.1"
  }
}

webpack.config.js

 'use strict'

const path = require('path')

const webpack = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const envalid = require('envalid')

const content = require('./src/content.js')

// === UTILS ===

const stringifyKeys = (obj) => (sum, key) =>
  Object.assign({}, sum, { [key]: JSON.stringify(obj[key]) })

const isNodeModule = (module) =>
  module.context && module.context.indexOf('node_modules') !== -1

// === ENV ===

const { str, bool } = envalid
const env = envalid.cleanEnv(process.env, {
  NODE_ENV: str({
    choices: [ 'development', 'production' ],
    default: 'development'
  }),
  PUBLIC_PATH: str({
    default: ''
  }),
  WEBPACK_BUNDLE_ANALYZER: bool({ default: false })
})

// === PLUGINS ===

const plugins = [
  new webpack.DefinePlugin({
    'process.env': [
      'NODE_ENV'
    ].reduce(stringifyKeys(env), {}),
    IS_PRODUCTION: JSON.stringify(env.isProduction),
    IS_DEVELOPMENT: JSON.stringify(env.isDev)
  }),
  // needed for three-bmfont-text
  new webpack.ProvidePlugin({
    'THREE': 'three'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: isNodeModule
  }),
  new ExtractTextPlugin('styles.css'),
  new CopyWebpackPlugin([{
    from: 'public',
    to: '.'
  }], {
    ignore: [ '.DS_Store' ]
  }),
  new HtmlWebpackPlugin({
    title: 'Binary Capital',
    template: './src/index.html',
    content
  }),
  new ScriptExtHtmlWebpackPlugin({
    defaultAttribute: 'defer'
  })
]

if (env.isProduction) {
  plugins.push(...[
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      comments: false
    })
  ])
}

if (env.WEBPACK_BUNDLE_ANALYZER) {
  plugins.push(...[
    new BundleAnalyzerPlugin()
  ])
}

// === CONFIG ===

const jsLoaders = [ 'babel-loader' ]
if (env.isProduction) {
  jsLoaders.push('strip-loader?strip[]=console.log')
}

const config = {
  entry: './src/client.js',
  devtool: env.isProduction ? 'cheap-module-source-map' : 'source-map',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
    publicPath: env.PUBLIC_PATH
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: jsLoaders,
      exclude: /(node_modules\/(?!whs)|bower_components)/
    }, {
      test: /\.glsl$/,
      loaders: [ 'raw-loader', 'glslify-loader' ],
      exclude: /node_modules/
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader!sass-loader'
      })
    }]
  },
  resolve: {
    symlinks: false,
    alias: {
      bincap: path.resolve(__dirname, './src')
    },
    modules: [ path.resolve('node_modules') ]
  },
  plugins
}

if (env.isDev) {
  Object.assign(config, {
    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      stats: { chunks: true }
    }
  })
}

module.exports = config