add webpack production config

resources/index.html → index.html

@@ -44,8 +44,6 @@
     <div id="content"></div>
     <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
     <script type="text/javascript" src="js/dat.gui.min.js"></script>
-    <!-- <script src="dist/vendor.bundle.js"></script> -->
-    <script src="js/app.js"></script>
 
 </body>
 

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack"
+    "dev": "webpack",
+    "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js"
   },
   "author": "",
   "license": "ISC",
@@ -14,13 +15,15 @@
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
     "browser-sync": "^2.23.6",
     "browser-sync-webpack-plugin": "^1.2.0",
     "copy-webpack-plugin": "^4.3.1",
     "eslint": "^3.19.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-private-props": "^0.3.0",
     "glslify-loader": "^1.0.2",
+    "html-webpack-plugin": "^3.0.6",
     "raw-loader": "^0.5.1",
     "webpack": "^3.10.0"
   },

src/core/Shader.js

@@ -178,8 +178,8 @@ export default class Shader {
     this._uniforms = [];
     [this._vsCode, this._fsCode].forEach((src) => {
       src.
-        replace(/\/\*[\s\S]*?\*\//g, '').
-        replace(/\/\/[^\n]*/g, '').
+        replace(/\/\*[\s\S]*?\*\//g, '').   // remove block comment
+        replace(/\/\/[^\n]*/g, ''). // remove comment
         split(';').
         forEach((line) => {
           let m = line.match(/^\s*(uniform|attribute)\s+/);
@@ -220,6 +220,10 @@ export default class Shader {
       this._uniformMap[uniform.name] = uniform.location;
     });
 
+    let attributesCount = gl.getProgramParameter(this._program, gl.ACTIVE_ATTRIBUTES);
+    let uniformsCount = gl.getProgramParameter(this._program, gl.ACTIVE_UNIFORMS);
+    let uniformBlocksCount = gl.getProgramParameter(this._program, gl.ACTIVE_UNIFORM_BLOCKS);
+
     this._uniformLocations = {};
     this._uniformBlockIndices = {};
 

webpack.config.js

@@ -1,6 +1,7 @@
 let path = require('path');
 let webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 
 let definePlugin = new webpack.DefinePlugin({
@@ -11,22 +12,30 @@ module.exports = {
   entry: {
     app: [
       path.resolve(__dirname, 'src/main')
-    ]
-    // vendor: ['gl-matrix']
+    ],
+    vendor: ['gl-matrix']
   },
   devtool: 'source-map',
   output: {
     pathinfo: true,
-    path: path.resolve(__dirname, 'build'),
-    filename: 'debug/js/app.js'
+    path: path.resolve(__dirname, 'build/debug'),
+    filename: 'js/[name].js'
   },
   plugins: [
     definePlugin,
-    // new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.bundle.js'),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "vendor",
+      minChunks: Infinity
+    }),
     new webpack.HotModuleReplacementPlugin(),
     new CopyWebpackPlugin([
       { context: 'resources/', from: '**/*', to: 'debug' },
     ]),
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      inject: true,
+      filename: 'index.html'
+    }),
     new BrowserSyncPlugin({
       host: 'localhost',
       port: 3000,
@@ -35,10 +44,19 @@ module.exports = {
   ],
   module: {
     loaders: [
-      { test: /\.js$/, loader: 'babel-loader', include: [ path.join(__dirname, 'src') ], exclude: /node_modules/ },
-      { test: /\.(glsl|frag|vert)$/, loader: 'raw-loader', exclude: /node_modules/ },
-      { test: /\.(glsl|frag|vert)$/, loader: 'glslify-loader', exclude: /node_modules/ },
-      { test: /\.worker\.js$/, loader: "worker!babel?presets[]=es2015" }
+      { 
+        test: /\.js$/, 
+        use: {
+          loader: 'babel-loader',
+          options: {
+            "presets": [["es2015", { modules: false }]],
+          }
+        },
+        exclude: /node_modules\/lodash/
+      },
+      { test: /\.(glsl|frag|vert)$/, loader: 'raw-loader', include: [ path.join(__dirname, 'src') ], exclude: /node_modules/ },
+      { test: /\.(glsl|frag|vert)$/, loader: 'glslify-loader', include: [ path.join(__dirname, 'src') ], exclude: /node_modules/ },
+      { test: /\.worker\.js$/, loader: "worker!babel?presets[]=es2015", include: [ path.join(__dirname, 'src') ], exclude: /node_modules/ }
     ]
   },
   node: {

webpack.production.config.js

@@ -0,0 +1,76 @@
+let path = require('path');
+let webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+let definePlugin = new webpack.DefinePlugin({
+  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
+});
+
+module.exports = {
+  entry: {
+    app: [
+      path.resolve(__dirname, 'src/main')
+    ],
+    vendor: ['gl-matrix']
+  },
+  output: {
+    pathinfo: true,
+    path: path.resolve(__dirname, 'build/release/'),
+    filename: 'js/[name].js'
+  },
+  plugins: [
+    definePlugin,
+    new CopyWebpackPlugin([
+      { context: 'resources/', from: '**/*', to: 'release' },
+    ]),
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      inject: true,
+      filename: 'index.html'
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "vendor",
+      minChunks: Infinity
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      output: {
+        comments(node, comment) {
+          let text = comment.value;
+          let type = comment.type;
+          if (type === "comment2") {
+                // multiline comment
+            return /@copyright/i.test(text);
+          }
+        }
+      }
+    }),
+    new webpack.optimize.AggressiveMergingPlugin()
+  ],
+  module: {
+    loaders: [
+      { 
+        test: /\.js$/, 
+        use: {
+          loader: 'babel-loader',
+          options: {
+            "presets": [["es2015", { modules: false }]],
+          }
+        },
+        exclude: /node_modules\/lodash/
+      },
+      { test: /\.(glsl|frag|vert)$/, loader: 'raw-loader', include: [ path.join(__dirname, 'src') ], exclude: /node_modules/ },
+      { test: /\.(glsl|frag|vert)$/, loader: 'glslify-loader', include: [ path.join(__dirname, 'src') ], exclude: /node_modules/ },
+      { test: /\.worker\.js$/, loader: "worker!babel?presets[]=es2015", include: [ path.join(__dirname, 'src') ], exclude: /node_modules/ }
+    ]
+  },
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  },
+  resolve: {
+    // alias: {
+    //   'pixi': pixi
+    // }
+  }
+};