fixing bundling - it's too big

client/js/components/Post.js

@@ -1,4 +1,4 @@
-import hljs from 'highlight.js';
+import hljs from 'hljs';
 import marked from 'marked';
 import React from 'react';
 import {Link} from 'react-router';

index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="author" content="Mitchell Gerber">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
     <title>mitchel.io</title>
 </head>
 

package.json

@@ -4,13 +4,14 @@
   "description": "My personal website built with React and Go",
   "main": "index.js",
   "scripts": {
-    "build": "webpack && babel-node metadata.js",
+    "analyze": "webpack --json | webpack-bundle-size-analyzer",
+    "build": "NODE_ENV=production webpack -p --progress --colors && babel-node metadata.js",
     "c9": "webpack-dev-server --port $PORT --host $IP --hot --content-base dist --history-api-fallback",
     "check_gzip_size": "gzip -9 -c ./public/client.min.js | wc -c | numfmt --to=iec-i --suffix=B --padding=10",
     "deploy": "npm run get_dependencies && npm run prod && ./mywebsite",
     "dev": "webpack-dev-server --content-base public --inline --hot --history-api-fallback",
     "get_dependencies": "go get ./server && npm install",
-    "prod": "NODE_ENV=production webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors && babel-node metadata.js && go build ./server/mywebsite.go",
+    "prod": "npm run build && go build ./server/mywebsite.go",
     "prod-win": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors && babel-node metadata.js && go build ./server/mywebsite.go",
     "watch": "webpack --watch --colors --progress"
   },
@@ -42,7 +43,7 @@
     "exports-loader": "^0.6.3",
     "file-loader": "^0.9.0",
     "font-awesome": "^4.6.3",
-    "highlight.js": "^9.6.0",
+    "highlight.js": "^9.7.0",
     "html-webpack-plugin": "^2.22.0",
     "marked": "^0.3.6",
     "ncp": "^2.0.0",

webpack.config.js

@@ -6,7 +6,7 @@ var autoprefixer = require('autoprefixer');
 
 module.exports = {
   devtool: debug ? "inline-sourcemap" : null,
-  entry: ["babel-polyfill", , "whatwg-fetch", "./client/js/app.js"],
+  entry: ["babel-polyfill", "./client/js/app.js"],
   module: {
     loaders: [
       {
@@ -35,17 +35,27 @@ module.exports = {
     publicPath: "/public/",
     filename: "client.min.js"
   },
-  plugins: debug ? [] : [
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
-  ],
-  plugins: [
+  plugins: getPlugins(),
+  externals:{hljs: "hljs"}
+};
+
+function getPlugins(){
+  var plugins = [
       new HtmlWebpackPlugin({
       fileName: 'index.html',
       template: 'index.html',
       inject: 'body',
       hash: true
-    })
-  ]
-};
+    }),
+    new webpack.EnvironmentPlugin([
+      "NODE_ENV"
+    ])
+  ];
+  if(!debug){
+    plugins = plugins.concat([
+        new webpack.optimize.DedupePlugin(),
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false})
+  ])}
+  return plugins; 
+}