Skip to content

Instantly share code, notes, and snippets.

@thejmazz
Created August 1, 2017 04:32
Show Gist options
  • Save thejmazz/082e4af948efc17cd8622c182c67e67e to your computer and use it in GitHub Desktop.
Save thejmazz/082e4af948efc17cd8622c182c67e67e to your computer and use it in GitHub Desktop.
ES2015 + glsl files + inline GLSL, with glslify on webpack 2
{
"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"
}
}
'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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment