Merge pull request #195 from Yukaii/webpack-frontend

Use Webpack to bundle frontend code
2016-10-13 12:41:57 +08:00 · 2016-10-13 12:41:57 +08:00 · af461ac2d6
parent 53f88d82d1 773c0ce39e
commit af461ac2d6
26 changed files with 818 additions and 328 deletions
--- a/.gitignore
+++ b/.gitignore
@ -21,3 +21,7 @@ backups/
 config.json
 public/js/config.js
 .sequelizerc
+
+# ignore webpack build
+public/build
+public/views/build
--- a/bower.json
+++ b/bower.json
@ -16,51 +16,21 @@
  ],
  "dependencies": {
    "bootstrap": "~3.3.7",
-    "jquery": "~3.1.1",
    "font-awesome": "~4.6.3",
    "Ionicons": "ionicons#~2.0.1",
    "reveal.js": "~3.3.0",
-    "jquery-mousewheel": "~3.1.13",
    "spin.js": "~2.3.2",
    "moment": "~2.15.1",
    "handlebars": "~4.0.5",
-    "js-url": "~2.3.0",
-    "socket.io-client": "~1.5.0",
-    "viz.js": "~1.3.0",
    "js-yaml": "~3.6.1",
-    "to-markdown": "~3.0.1",
-    "lz-string": "~1.4.4",
    "raphael": "~2.2.6",
-    "flowchart": "~1.6.3",
-    "xss": "~0.2.13",
-    "markdown-it": "^8.0.0",
-    "markdown-it-abbr": "^1.0.4",
-    "markdown-it-footnote": "^3.0.1",
-    "markdown-it-deflist": "^2.0.1",
-    "markdown-it-mark": "^2.0.0",
-    "markdown-it-ins": "^2.0.0",
-    "markdown-it-sub": "^1.0.0",
-    "markdown-it-sup": "^1.0.0",
-    "markdown-it-container": "^2.0.0",
    "mermaid": "^6.0.0",
    "MathJax": "^2.6.1",
    "octicons": "~3.5.0",
    "velocity": "^1.3.1",
-    "highlightjs": "^9.7.0",
-    "lodash": "^4.16.4",
    "randomcolor": "randomColor#^0.4.4",
-    "file-saver": "FileSaver#^1.3.1",
    "Idle.Js": "idle.js#^1.0.0",
-    "js-cookie": "^2.1.3",
-    "list.js": "^1.2.0",
-    "store-js": "store.js#^1.3.20",
-    "string": "^3.3.3",
-    "visibilityjs": "^1.2.4",
-    "pdfobject": "pdfobject2#*",
-    "gist-embed": "*",
-    "keymaster": "^1.6.3",
-    "prism": "^1.5.1",
-    "list.pagination.js": "^0.1.1"
+    "gist-embed": "*"
  },
  "resolutions": {
    "jquery": "~3.1.1"
--- a/package.json
+++ b/package.json
@ -4,10 +4,16 @@
  "description": "Realtime collaborative markdown notes on all platforms.",
  "main": "app.js",
  "license": "MIT",
+  "scripts": {
+    "dev": "webpack --config webpack.config.js --progress --colors --watch",
+    "build": "webpack --config webpack.production.js --progress --colors"
+  },
  "dependencies": {
+    "Idle.Js": "github:shawnmclean/Idle.js",
    "async": "^2.0.1",
    "blueimp-md5": "^2.4.0",
    "body-parser": "^1.15.2",
+    "bootstrap": "^3.3.7",
    "chance": "^1.0.4",
    "cheerio": "^0.22.0",
    "compression": "^1.6.2",
@ -17,15 +23,44 @@
    "diff-match-patch": "git+https://github.com/hackmdio/diff-match-patch.git",
    "ejs": "^2.5.2",
    "emojify.js": "^1.1.0",
+    "engine.io-client": "^1.7.0",
    "express": ">=4.14",
    "express-session": "^1.14.1",
+    "file-saver": "^1.3.3",
+    "flowchart.js": "^1.6.3",
    "formidable": "^1.0.17",
+    "gist-embed": "github:yukaii/gist-embed",
+    "handlebars": "^4.0.5",
    "helmet": "^2.3.0",
+    "highlight.js": "^9.7.0",
    "i18n": "^0.8.3",
    "imgur": "git+https://github.com/hackmdio/node-imgur.git",
+    "jquery": "^3.1.1",
+    "jquery-mousewheel": "^3.1.13",
+    "jquery-scrollspy": "github:softwarespot/jquery-scrollspy",
+    "jquery-textcomplete": "^1.7.3",
+    "jquery-ui": "^1.12.1",
+    "js-cookie": "^2.1.3",
+    "js-sequence-diagrams": "^1000000.0.6",
+    "js-url": "^2.3.0",
    "jsdom-nogyp": "^0.8.3",
+    "keymaster": "^1.6.2",
+    "list.js": "^1.2.0",
+    "list.pagination.js": "^0.1.1",
+    "lodash": "^4.16.4",
    "lz-string": "1.4.4",
    "markdown-it": "^8.0.0",
+    "markdown-it-abbr": "^1.0.4",
+    "markdown-it-container": "^2.0.0",
+    "markdown-it-deflist": "^2.0.1",
+    "markdown-it-footnote": "^3.0.1",
+    "markdown-it-imsize": "^2.0.1",
+    "markdown-it-ins": "^2.0.0",
+    "markdown-it-mark": "^2.0.0",
+    "markdown-it-mathjax": "^1.0.3",
+    "markdown-it-regexp": "^0.4.0",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
    "markdown-pdf": "^7.0.0",
    "meta-marked": "^0.4.2",
    "method-override": "^2.3.6",
@ -41,30 +76,69 @@
    "passport-google-oauth20": "^1.0.0",
    "passport-twitter": "^1.0.4",
    "passport.socketio": "^3.6.2",
+    "pdfobject": "^2.0.201604172",
    "pg": "^6.1.0",
    "pg-hstore": "^2.3.2",
+    "prismjs": "^1.5.1",
    "randomcolor": "^0.4.4",
+    "raphael": "github:dmitrybaranovskiy/raphael",
    "request": "^2.75.0",
-    "reveal.js": "3.3.0",
+    "reveal.js": "^3.3.0",
    "sequelize": "^3.24.3",
    "sequelize-cli": "^2.4.0",
    "shortid": "2.2.6",
    "socket.io": "1.5.0",
+    "socket.io-client": "^1.5.0",
+    "spin.js": "^2.3.2",
    "sqlite3": "^3.1.6",
+    "store": "^1.3.20",
    "string": "^3.3.1",
    "tedious": "^1.14.0",
+    "to-markdown": "^3.0.1",
    "toobusy-js": "^0.5.1",
-    "winston": "^2.2.0"
+    "visibilityjs": "^1.2.4",
+    "viz.js": "^1.3.0",
+    "winston": "^2.2.0",
+    "xss": "^0.2.13"
  },
  "engines": {
    "node": ">=4.x"
  },
  "bugs": "https://github.com/hackmdio/hackmd/issues",
-  "keywords": ["Collaborative", "Markdown", "Notes"],
+  "keywords": [
+    "Collaborative",
+    "Markdown",
+    "Notes"
+  ],
  "homepage": "https://hackmd.io",
-  "maintainers": [{"name": "Max Wu", "email": "jackymaxj@gmail.com"}],
+  "maintainers": [
+    {
+      "name": "Max Wu",
+      "email": "jackymaxj@gmail.com"
+    }
+  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/hackmdio/hackmd.git"
+  },
+  "devDependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "bower-webpack-plugin": "^0.1.9",
+    "css-loader": "^0.25.0",
+    "ejs-loader": "^0.3.0",
+    "exports-loader": "^0.6.3",
+    "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.22.0",
+    "imports-loader": "^0.6.5",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "script-loader": "^0.7.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.2"
  }
 }
--- a/public/js/common.js
+++ b/public/js/common.js
@ -1,3 +1,11 @@
+var config = require('./config');
+var domain = config.domain; // domain name
+var urlpath = config.urlpath; // sub url path, like: www.example.com/<urlpath>
+var debug = config.debug;
+var GOOGLE_API_KEY = config.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = config.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = config.DROPBOX_APP_KEY;
+
 //common
 var port = window.location.port;
 var serverurl = window.location.protocol + '//' + (domain ? domain : window.location.hostname) + (port ? ':' + port : '') + (urlpath ? '/' + urlpath : '');
@ -83,3 +91,31 @@ function checkIfAuth(yesCallback, noCallback) {
        noCallback();
    }
 }
+
+module.exports = {
+  domain: domain,
+  urlpath: urlpath,
+  debug: debug,
+  GOOGLE_API_KEY: GOOGLE_API_KEY,
+  GOOGLE_CLIENT_ID: GOOGLE_CLIENT_ID,
+  DROPBOX_APP_KEY: DROPBOX_APP_KEY,
+  port: port,
+  serverurl: serverurl,
+  noteid: noteid,
+  noteurl: noteurl,
+  version: version,
+  checkAuth: checkAuth,
+  profile: profile,
+  lastLoginState: lastLoginState,
+  lastUserId: lastUserId,
+  loginStateChangeEvent: loginStateChangeEvent,
+
+  /* export functions */
+  resetCheckAuth: resetCheckAuth,
+  setLoginState: setLoginState,
+  checkLoginStateChanged: checkLoginStateChanged,
+  getLoginState: getLoginState,
+  getUserId: getUserId,
+  clearLoginState: clearLoginState,
+  checkIfAuth: checkIfAuth
+};
--- a/public/js/config.js.example
+++ b/public/js/config.js.example
@ -1,10 +1,11 @@
-//config
-var domain = ''; // domain name
-var urlpath = ''; // sub url path, like: www.example.com/<urlpath>
-//settings
-var debug = false;
+module.exports = {
+    domain: '', // domain name
+    urlpath: '', // sub url path, like: www.example.com/<urlpath>

-var GOOGLE_API_KEY = '';
-var GOOGLE_CLIENT_ID = '';
+    // settings
+    debug: false,

-var DROPBOX_APP_KEY = '';
+    GOOGLE_API_KEY: '',
+    GOOGLE_CLIENT_ID: '',
+    DROPBOX_APP_KEY: ''
+};
--- a/public/js/cover.js
+++ b/public/js/cover.js
@ -1,3 +1,26 @@
+var common = require('./common');
+var checkIfAuth = common.checkIfAuth;
+var urlpath = common.urlpath;
+var serverurl = common.serverurl;
+var resetCheckAuth = common.resetCheckAuth;
+var getLoginState = common.getLoginState;
+var clearLoginState = common.clearLoginState;
+
+var historyModule = require('./history');
+var parseStorageToHistory = historyModule.parseStorageToHistory;
+var parseHistory = historyModule.parseHistory;
+var getStorageHistory = historyModule.getStorageHistory;
+var getHistory = historyModule.getHistory;
+var saveHistory = historyModule.saveHistory;
+var removeHistory = historyModule.removeHistory;
+var postHistoryToServer = historyModule.postHistoryToServer;
+var deleteServerHistory = historyModule.deleteServerHistory;
+var parseServerToHistory = historyModule.parseServerToHistory;
+var saveStorageHistoryToServer = historyModule.saveStorageHistoryToServer;
+
+var saveAs = require('file-saver').saveAs;
+var List = require('list.js');
+
 var options = {
    valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'],
    item: '<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">\
--- a/public/js/extra.js
+++ b/public/js/extra.js
@ -1,3 +1,9 @@
+var hljs = require('highlight.js');
+var PDFObject = require('pdfobject');
+var S = require('string');
+var saveAs = require('file-saver').saveAs;
+require('../vendor/md-toc');
+
 //auto update last change
 var createtime = null;
 var lastchangetime = null;
@ -257,50 +263,51 @@ function finishView(view) {
            MathJax.Hub.Queue(viewAjaxCallback);
        }
    } catch (err) {}
-    //sequence diagram
-    var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
-    sequences.each(function (key, value) {
-        try {
-            var $value = $(value);
-            var $ele = $(value).parent().parent();
+        //sequence diagram
+        var sequences = view.find(".sequence-diagram.raw").removeClass("raw");
+        sequences.each(function (key, value) {
+            try {
+                var $value = $(value);
+                var $ele = $(value).parent().parent();

-            var sequence = $value;
-            sequence.sequenceDiagram({
-                theme: 'simple'
-            });
+                var sequence = $value;
+                sequence.sequenceDiagram({
+                    theme: 'simple'
+                });

-            $ele.addClass('sequence-diagram');
-            $value.children().unwrap().unwrap();
-            var svg = $ele.find('> svg');
-            svg[0].setAttribute('viewBox', '0 0 ' + svg.attr('width') + ' ' + svg.attr('height'));
-            svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
-        } catch (err) {
-            console.warn(err);
-        }
-    });
-    //flowchart
-    var flow = view.find(".flow-chart.raw").removeClass("raw");
-    flow.each(function (key, value) {
-        try {
-            var $value = $(value);
-            var $ele = $(value).parent().parent();
+                $ele.addClass('sequence-diagram');
+                $value.children().unwrap().unwrap();
+                var svg = $ele.find('> svg');
+                svg[0].setAttribute('viewBox', '0 0 ' + svg.attr('width') + ' ' + svg.attr('height'));
+                svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet');
+            } catch (err) {
+                console.warn(err);
+            }
+        });
+        //flowchart
+        var flow = view.find(".flow-chart.raw").removeClass("raw");
+        flow.each(function (key, value) {
+            try {
+                var $value = $(value);
+                var $ele = $(value).parent().parent();

-            var chart = flowchart.parse($value.text());
-            $value.html('');
-            chart.drawSVG(value, {
-                'line-width': 2,
-                'fill': 'none',
-                'font-size': '16px',
-                'font-family': "'Andale Mono', monospace"
-            });
+                var chart = flowchart.parse($value.text());
+                $value.html('');
+                chart.drawSVG(value, {
+                    'line-width': 2,
+                    'fill': 'none',
+                    'font-size': '16px',
+                    'font-family': "'Andale Mono', monospace"
+                });

-            $ele.addClass('flow-chart');
-            $value.children().unwrap().unwrap();
-        } catch (err) {
-            console.warn(err);
-        }
-    });
+                $ele.addClass('flow-chart');
+                $value.children().unwrap().unwrap();
+            } catch (err) {
+                console.warn(err);
+            }
+        });
    //graphviz
+    var Viz = require("viz.js");
    var graphvizs = view.find(".graphviz.raw").removeClass("raw");
    graphvizs.each(function (key, value) {
        try {
@ -316,6 +323,7 @@ function finishView(view) {
            console.warn(err);
        }
    });
+
    //mermaid
    var mermaids = view.find(".mermaid.raw").removeClass("raw");
    mermaids.each(function (key, value) {
@ -427,14 +435,14 @@ function finishView(view) {
        });
    //pdf
    view.find(".pdf.raw").removeClass("raw")
-        .each(function (key, value) {
-            var url = $(value).attr('data-pdfurl');
-            var inner = $('<div></div>');
-            $(this).append(inner);
-            PDFObject.embed(url, inner, {
-                height: '400px'
+            .each(function (key, value) {
+                var url = $(value).attr('data-pdfurl');
+                var inner = $('<div></div>');
+                $(this).append(inner);
+                PDFObject.embed(url, inner, {
+                    height: '400px'
+                });
            });
-        });
    //syntax highlighting
    view.find("pre.raw").removeClass("raw")
        .each(function (key, value) {
@ -483,6 +491,7 @@ function postProcess(code) {
 	}
    return result;
 }
+window.postProcess = postProcess;

 function generateCleanHTML(view) {
    var src = view.clone();
@ -534,6 +543,8 @@ function exportToRawHTML(view) {
    saveAs(blob, filename);
 }

+var common = require('./common.js');
+var serverurl = common.serverurl;
 //extract markdown body to html and compile to template
 function exportToHTML(view) {
    var title = renderTitle(ui.area.markdown);
@ -829,7 +840,10 @@ emojify.setConfig({
    ignore_emoticons: true
 });

-var md = window.markdownit('default', {
+var markdownit = require('markdown-it');
+var markdownitContainer = require('markdown-it-container');
+
+var md = markdownit('default', {
    html: true,
    breaks: true,
    langPrefix: "",
@ -837,25 +851,28 @@ var md = window.markdownit('default', {
    typographer: true,
    highlight: highlightRender
 });
-md.use(window.markdownitAbbr);
-md.use(window.markdownitFootnote);
-md.use(window.markdownitDeflist);
-md.use(window.markdownitMark);
-md.use(window.markdownitIns);
-md.use(window.markdownitSub);
-md.use(window.markdownitSup);
-md.use(window.markdownitMathjax);
-md.use(window.markdownitImsize);
+window.md = md;
+
+md.use(require('markdown-it-abbr'));
+md.use(require('markdown-it-footnote'));
+md.use(require('markdown-it-deflist'));
+md.use(require('markdown-it-mark'));
+md.use(require('markdown-it-ins'));
+md.use(require('markdown-it-sub'));
+md.use(require('markdown-it-sup'));
+md.use(require('../vendor/markdown-it-mathjax'));
+md.use(require('markdown-it-imsize'));
+
 function renderContainer(tokens, idx, options, env, self) {
    tokens[idx].attrJoin('role', 'alert');
    tokens[idx].attrJoin('class', 'alert');
    tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim());
    return self.renderToken.apply(self, arguments);
 }
-md.use(window.markdownitContainer, 'success', { render: renderContainer });
-md.use(window.markdownitContainer, 'info', { render: renderContainer });
-md.use(window.markdownitContainer, 'warning', { render: renderContainer });
-md.use(window.markdownitContainer, 'danger', { render: renderContainer });
+md.use(markdownitContainer, 'success', { render: renderContainer });
+md.use(markdownitContainer, 'info', { render: renderContainer });
+md.use(markdownitContainer, 'warning', { render: renderContainer });
+md.use(markdownitContainer, 'danger', { render: renderContainer });

 md.renderer.rules.image = function (tokens, idx, options, env, self) {
    tokens[idx].attrJoin('class', 'raw');
@ -900,6 +917,9 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
        + '</code></pre>\n';
 };

+/* Defined regex markdown it plugins */
+require('script!../vendor/markdown-it-regexp');
+
 //youtube
 var youtubePlugin = new Plugin(
    // regexp to match
@ -1047,3 +1067,25 @@ md.use(tocPlugin);
 md.use(slidesharePlugin);
 md.use(speakerdeckPlugin);
 md.use(pdfPlugin);
+
+module.exports = {
+  md: md,
+  createtime: createtime,
+  lastchangetime: lastchangetime,
+  updateLastChange: updateLastChange,
+  lastchangeui: lastchangeui,
+  lastchangeuser: lastchangeuser,
+  postProcess: postProcess,
+  finishView: finishView,
+  autoLinkify: autoLinkify,
+  deduplicatedHeaderId: deduplicatedHeaderId,
+  renderTOC: renderTOC,
+  renderTitle: renderTitle,
+  renderFilename: renderFilename,
+  generateToc: generateToc,
+  smoothHashScroll: smoothHashScroll,
+  scrollToHash: scrollToHash,
+  owner: owner,
+  updateLastChangeUser: updateLastChangeUser,
+  updateOwner: updateOwner
+};
--- a/public/js/history.js
+++ b/public/js/history.js
@ -1,3 +1,15 @@
+var store = require('store');
+
+var common = require('./common');
+var checkIfAuth = common.checkIfAuth;
+var urlpath = common.urlpath;
+var serverurl = common.serverurl;
+var getLoginState = common.getLoginState;
+
+var extra = require('./extra');
+var renderFilename = extra.renderFilename;
+var md = extra.md;
+
 var migrateHistoryFromTempCallback = null;

 migrateHistoryFromTemp();
@ -393,3 +405,17 @@ function deleteServerHistory(noteId, callback) {
        return callback(error, null);
    });
 }
+
+module.exports = {
+    writeHistory: writeHistory,
+    parseHistory: parseHistory,
+    getStorageHistory: getStorageHistory,
+    getHistory: getHistory,
+    saveHistory: saveHistory,
+    removeHistory: removeHistory,
+    parseStorageToHistory: parseStorageToHistory,
+    postHistoryToServer: postHistoryToServer,
+    deleteServerHistory: deleteServerHistory,
+    parseServerToHistory: parseServerToHistory,
+    saveStorageHistoryToServer: saveStorageHistoryToServer
+}
--- a/public/js/index.js
+++ b/public/js/index.js
@ -1,3 +1,68 @@
+/* jquery and jquery plugins */
+require('../vendor/showup/showup');
+
+require('prismjs/themes/prism.css');
+require('highlight.js/styles/github-gist.css');
+
+require('prismjs');
+require('prismjs/components/prism-wiki');
+var toMarkdown = require('to-markdown');
+
+var saveAs = require('file-saver').saveAs;
+require('js-url');
+require('randomcolor');
+
+var _ = require("lodash");
+
+var List = require('list.js');
+
+var common = require('./common.js');
+var urlpath = common.urlpath;
+var noteid = common.noteid;
+var debug = common.debug;
+var version = common.version;
+var serverurl = common.serverurl;
+var GOOGLE_API_KEY = common.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = common.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = common.DROPBOX_APP_KEY;
+var noteurl = common.noteurl;
+
+var checkLoginStateChanged = common.checkLoginStateChanged;
+
+var syncScroll = require('./syncscroll');
+var setupSyncAreas = syncScroll.setupSyncAreas;
+var clearMap = syncScroll.clearMap;
+var syncScrollToEdit = syncScroll.syncScrollToEdit;
+var syncScrollToView = syncScroll.syncScrollToView;
+
+require('./pretty');
+var extra = require('./extra');
+var md = extra.md;
+var createtime = extra.createtime;
+var updateLastChange = extra.updateLastChange;
+var postProcess = extra.postProcess;
+var finishView = extra.finishView;
+var lastchangetime = extra.lastchangetime;
+var autoLinkify = extra.autoLinkify;
+var generateToc = extra.generateToc;
+var smoothHashScroll = extra.smoothHashScroll;
+var lastchangeuser = extra.lastchangeuser;
+var deduplicatedHeaderId = extra.deduplicatedHeaderId;
+var renderTOC = extra.renderTOC;
+var renderTitle = extra.renderTitle;
+var renderFilename = extra.renderFilename;
+var scrollToHash = extra.scrollToHash;
+var owner = extra.owner;
+var updateLastChangeUser = extra.updateLastChangeUser;
+var updateOwner = extra.updateOwner;
+
+var historyModule = require('./history');
+var writeHistory = historyModule.writeHistory;
+var deleteServerHistory = historyModule.deleteServerHistory;
+
+var renderer = require('./render');
+var preventXSS = renderer.preventXSS;
+
 var defaultTextHeight = 20;
 var viewportMargin = 20;
 var mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
@ -279,7 +344,7 @@ var supportExtraTags = [
        }
    }
 ];
-var modeType = {
+window.modeType = {
    edit: {
        name: "edit"
    },
@ -310,18 +375,18 @@ var statusType = {
 var defaultMode = modeType.view;

 //global vars
-var loaded = false;
-var needRefresh = false;
-var isDirty = false;
-var editShown = false;
-var visibleXS = false;
-var visibleSM = false;
-var visibleMD = false;
-var visibleLG = false;
-var isTouchDevice = 'ontouchstart' in document.documentElement;
-var currentMode = defaultMode;
-var currentStatus = statusType.offline;
-var lastInfo = {
+window.loaded = false;
+window.needRefresh = false;
+window.isDirty = false;
+window.editShown = false;
+window.visibleXS = false;
+window.visibleSM = false;
+window.visibleMD = false;
+window.visibleLG = false;
+window.isTouchDevice = 'ontouchstart' in document.documentElement;
+window.currentMode = defaultMode;
+window.currentStatus = statusType.offline;
+window.lastInfo = {
    needRestore: false,
    cursor: null,
    scroll: null,
@ -343,9 +408,9 @@ var lastInfo = {
    },
    history: null
 };
-var personalInfo = {};
-var onlineUsers = [];
-var fileTypes = {
+window.personalInfo = {};
+window.onlineUsers = [];
+window.fileTypes = {
    "pl": "perl",
    "cgi": "perl",
    "js": "javascript",
@ -359,7 +424,7 @@ var fileTypes = {
 //editor settings
 var textit = document.getElementById("textit");
 if (!textit) throw new Error("There was no textit area!");
-var editor = CodeMirror.fromTextArea(textit, {
+window.editor = CodeMirror.fromTextArea(textit, {
    mode: defaultEditorMode,
    backdrop: defaultEditorMode,
    keyMap: "sublime",
@ -1389,6 +1454,7 @@ function onGoogleAPILoaded() {
        .prop('defer', true)
        .appendTo('body');
 }
+window.onGoogleAPILoaded = onGoogleAPILoaded;

 //button actions
 //share
@ -2188,8 +2254,11 @@ function havePermission() {
    }
    return bool;
 }
+// global module workaround
+window.havePermission = havePermission;

 //socket.io actions
+var io = require("socket.io-client");
 var socket = io.connect({
    path: urlpath ? '/' + urlpath + '/socket.io/' : '',
    timeout: 5000 //5 secs to timeout
@ -2198,7 +2267,7 @@ var socket = io.connect({
 var on = socket.on;
 socket.on = function () {
    if (!checkLoginStateChanged() && !needRefresh)
-        on.apply(socket, arguments);
+        return on.apply(socket, arguments);
 };
 var emit = socket.emit;
 socket.emit = function () {
--- a/public/js/locale.js
+++ b/public/js/locale.js
@ -1,3 +1,5 @@
+require('./cover');
+
 var lang = "en";
 var userLang = navigator.language || navigator.userLanguage;
 var userLangCode = userLang.split('-')[0];
--- a/public/js/pretty.js
+++ b/public/js/pretty.js
@ -1,3 +1,16 @@
+var extra = require('./extra');
+var md = extra.md;
+var finishView = extra.finishView;
+var autoLinkify = extra.autoLinkify;
+var deduplicatedHeaderId = extra.deduplicatedHeaderId;
+var renderTOC = extra.renderTOC;
+var generateToc = extra.generateToc;
+var smoothHashScroll = extra.smoothHashScroll;
+var postProcess = extra.postProcess;
+var lastchangeui = extra.lastchangeui;
+var updateLastChange = extra.updateLastChange;
+var preventXSS = require('./render').preventXSS;
+
 var markdown = $(".markdown-body");
 var text = $('<textarea/>').html(markdown.html()).text();
 var lastMeta = md.meta;
@ -110,3 +123,11 @@ function scrollToBottom() {
        scrollTop: $(document.body)[0].scrollHeight
    }, 100, "linear");
 }
+
+window.scrollToTop = scrollToTop;
+window.scrollToBottom = scrollToBottom;
+
+module.exports = {
+  scrollToBottom: scrollToBottom,
+  scrollToTop: scrollToTop
+}
--- a/public/js/public.js
+++ b/public/js/public.js
@ -0,0 +1,27 @@
+/* jquery and jquery plugins */
+require('../vendor/showup/showup');
+
+require('prismjs/themes/prism.css');
+require('highlight.js/styles/github-gist.css');
+
+/* other vendors plugin */
+require('gist-embed');
+require('string');
+require('highlight.js');
+require('prismjs');
+require('prismjs/components/prism-wiki');
+require('to-markdown');
+
+require('file-saver');
+require('store');
+require('js-url');
+require('visibilityjs');
+require('list.js');
+require('../vendor/md-toc');
+require('randomcolor');
+
+require('./syncscroll');
+require('./extra');
+require('./history');
+require('./pretty');
+require('./render');
--- a/public/js/render.js
+++ b/public/js/render.js
@ -51,3 +51,8 @@ var filterXSSOptions = {
 function preventXSS(html) {
    return filterXSS(html, filterXSSOptions);
 }
+window.preventXSS = preventXSS;
+
+module.exports = {
+  preventXSS: preventXSS
+}
--- a/public/js/slide.js
+++ b/public/js/slide.js
@ -1,3 +1,45 @@
+require('prismjs/themes/prism.css');
+
+/* other vendors plugin */
+var S = require('string');
+require('prismjs');
+require('prismjs/components/prism-wiki');
+require('to-markdown');
+
+require('../vendor/md-toc');
+require('randomcolor');
+
+var commonModule = require('./common');
+var urlpath = commonModule.urlpath;
+var noteid = commonModule.noteid;
+var debug = commonModule.debug;
+var version = commonModule.version;
+var serverurl = commonModule.serverurl;
+var GOOGLE_API_KEY = commonModule.GOOGLE_API_KEY;
+var GOOGLE_CLIENT_ID = commonModule.GOOGLE_CLIENT_ID;
+var DROPBOX_APP_KEY = commonModule.DROPBOX_APP_KEY;
+var noteurl = commonModule.noteurl;
+
+var extraModule = require('./extra');
+var md = extraModule.md;
+var createtime = extraModule.createtime;
+var updateLastChange = extraModule.updateLastChange;
+var postProcess = extraModule.postProcess;
+var finishView = extraModule.finishView;
+var lastchangetime = extraModule.lastchangetime;
+var lastchangeui = extraModule.lastchangeui;
+var autoLinkify = extraModule.autoLinkify;
+var generateToc = extraModule.generateToc;
+var smoothHashScroll = extraModule.smoothHashScroll;
+var lastchangeuser = extraModule.lastchangeuser;
+var deduplicatedHeaderId = extraModule.deduplicatedHeaderId;
+var renderTOC = extraModule.renderTOC;
+var renderTitle = extraModule.renderTitle;
+var renderFilename = extraModule.renderFilename;
+var scrollToHash = extraModule.scrollToHash;
+
+var render = require('./render');
+
 var body = $(".slides").html();
 $(".slides").html(S(body).unescapeHTML().s);

--- a/public/js/syncscroll.js
+++ b/public/js/syncscroll.js
@ -1,5 +1,8 @@
 // Inject line numbers for sync scroll.

+var extra = require('./extra');
+var md = extra.md;
+
 function addPart(tokens, idx) {
    if (tokens[idx].map && tokens[idx].level === 0) {
        var startline = tokens[idx].map[0] + 1;
@ -99,10 +102,12 @@ function renderContainer(tokens, idx, options, env, self) {
    addPart(tokens, idx);
    return self.renderToken.apply(self, arguments);
 }
-md.use(window.markdownitContainer, 'success', { render: renderContainer });
-md.use(window.markdownitContainer, 'info', { render: renderContainer });
-md.use(window.markdownitContainer, 'warning', { render: renderContainer });
-md.use(window.markdownitContainer, 'danger', { render: renderContainer });
+
+var markdownitContainer = require('markdown-it-container');
+md.use(markdownitContainer, 'success', { render: renderContainer });
+md.use(markdownitContainer, 'info', { render: renderContainer });
+md.use(markdownitContainer, 'warning', { render: renderContainer });
+md.use(markdownitContainer, 'danger', { render: renderContainer });

 var syncscroll = true;

@ -361,3 +366,10 @@ function syncScrollToView(event, preventAnimate) {
 function editScrollingTimeoutInner() {
    editScrolling = false;
 }
+
+module.exports = {
+  setupSyncAreas: setupSyncAreas,
+  clearMap: clearMap,
+  syncScrollToEdit: syncScrollToEdit,
+  syncScrollToView: syncScrollToView
+};
--- a/public/vendor/codemirror-spell-checker/spell-checker.min.js
+++ b/public/vendor/codemirror-spell-checker/spell-checker.min.js
--- a/public/views/foot.ejs
+++ b/public/views/foot.ejs
@ -3,83 +3,26 @@
 </script>
 <% if(useCDN) { %>
 <script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" defer></script>
-<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="//cdn.jsdelivr.net/velocity/1.3.1/velocity.min.js" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" defer></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/js-yaml/3.6.1/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
 <% } else { %>
 <script src="<%- url %>/vendor/spin.js/spin.min.js" defer></script>
-<script src="<%- url %>/vendor/jquery/dist/jquery.min.js"></script>
 <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
-<script src="<%- url %>/vendor/jquery-mousewheel/jquery.mousewheel.min.js" defer></script>
-<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
-<script src="<%- url %>/vendor/socket.io-client/socket.io.js" defer></script>
 <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
 <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <% } %>
-<script src="<%- url %>/vendor/jquery-ui/jquery-ui.min.js" defer></script>
-<!--codemirror-->
-<script src="<%- url %>/vendor/codemirror/codemirror.min.js" defer></script>
-<script src="<%- url %>/vendor/inlineAttachment/inline-attachment.js" defer></script>
-<script src="<%- url %>/vendor/inlineAttachment/codemirror.inline-attachment.js" defer></script>
-<script src="<%- url %>/vendor/codemirror-spell-checker/spell-checker.min.js" defer></script>
-<!--ot-->
-<script src="<%- url %>/vendor/ot/ot.min.js" defer></script>
-<!--others-->
-<script src="<%- url %>/vendor/markdown-it/dist/markdown-it.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-abbr/dist/markdown-it-abbr.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-footnote/dist/markdown-it-footnote.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-deflist/dist/markdown-it-deflist.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mark/dist/markdown-it-mark.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-imsize.js" defer></script>
-<script src="<%- url %>/vendor/gist-embed/gist-embed.min.js" defer></script>
-<script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
-<script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>
-<script src="<%- url %>/vendor/string/dist/string.min.js" defer></script>
-<script src="<%- url %>/vendor/highlightjs/highlight.pack.min.js" defer></script>
-<script src="<%- url %>/vendor/prism/prism.js" defer></script>
-<script src="<%- url %>/vendor/prism/components/prism-wiki.min.js" defer></script>
-<script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
-<script src="<%- url %>/vendor/handlebars/handlebars.min.js" defer></script>
-<script src="<%- url %>/vendor/emojify/js/emojify.min.js" defer></script>
-<script src="<%- url %>/vendor/to-markdown/dist/to-markdown.js" defer></script>
-<script src="<%- url %>/vendor/raphael/raphael.min.js" defer></script>
-<script src="<%- url %>/vendor/lodash/dist/lodash.min.js" defer></script>
-<script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
-<script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
-<script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
-<script src="<%- url %>/vendor/pdfobject/pdfobject.min.js" defer></script>
-<script src="<%- url %>/vendor/file-saver/FileSaver.min.js" defer></script>
-<script src="<%- url %>/vendor/store-js/store.min.js" defer></script>
-<script src="<%- url %>/vendor/js-url/url.min.js" defer></script>
-<script src="<%- url %>/vendor/jquery-textcomplete/jquery.textcomplete.js" defer></script>
-<script src="<%- url %>/vendor/Idle.Js/build/idle.min.js" defer></script>
-<script src="<%- url %>/vendor/visibilityjs/lib/visibility.core.js" defer></script>
-<script src="<%- url %>/vendor/list.js/dist/list.min.js" defer></script>
-<script src="<%- url %>/vendor/md-toc.js" defer></script>
-<script src="<%- url %>/vendor/showup/showup.js" defer></script>
-<script src="<%- url %>/vendor/randomcolor/randomColor.js" defer></script>
-<script src="<%- url %>/vendor/keymaster/keymaster.js" defer></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js" defer></script>
+<%- include build/index-scripts %>
 <script src="<%- url %>/js/google-drive-upload.js" defer></script>
 <script src="<%- url %>/js/google-drive-picker.js" defer></script>
-<script src="<%- url %>/js/config.js" defer></script>
-<script src="<%- url %>/js/common.js" defer></script>
-<script src="<%- url %>/js/extra.js" defer></script>
-<script src="<%- url %>/js/render.js" defer></script>
-<script src="<%- url %>/js/history.js" defer></script>
 <script src="<%- url %>/js/reveal-markdown.js" defer></script>
-<script src="<%- url %>/js/syncscroll.js" defer></script>
-<script src="<%- url %>/js/index.js" defer></script>
--- a/public/views/head.ejs
+++ b/public/views/head.ejs
@ -8,18 +8,16 @@
 <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
 <link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
 <% if(useCDN) { %>
-<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
 <link rel="stylesheet" href="//cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.0/bootstrap-social.min.css">
 <% } else { %>
-<link rel="stylesheet" href="<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css">
-<link rel="stylesheet" href="<%- url %>/vendor/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
 <link rel="stylesheet" href="<%- url %>/css/bootstrap-social.css">
 <% } %>
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/jquery-ui/jquery-ui.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror/lib/codemirror.css">
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror-spell-checker/spell-checker.min.css">
@ -33,12 +31,11 @@
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror/mode/tiddlywiki/tiddlywiki.css">
 <link rel="stylesheet" href="<%- url %>/vendor/codemirror/mode/mediawiki/mediawiki.css">
 <link rel="stylesheet" href="<%- url %>/css/github-extract.css">
-<link rel="stylesheet" href="<%- url %>/vendor/highlightjs/styles/github-gist.css">
-<link rel="stylesheet" href="<%- url %>/vendor/prism/themes/prism.css">
 <link rel="stylesheet" href="<%- url %>/vendor/emojify/css/emojify.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/showup/showup.css">
 <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
 <link rel="stylesheet" href="<%- url %>/css/markdown.css">
+<%- include build/index-header %>
 <link rel="stylesheet" href="<%- url %>/css/index.css">
 <link rel="stylesheet" href="<%- url %>/css/extra.css">
 <link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
--- a/public/views/includes/header.ejs
+++ b/public/views/includes/header.ejs
@ -0,0 +1,3 @@
+<% for (var css in htmlWebpackPlugin.files.css) { %>
+<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+<% } %>
--- a/public/views/includes/scripts.ejs
+++ b/public/views/includes/scripts.ejs
@ -0,0 +1,3 @@
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" defer></script>
+<% } %>
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@ -27,6 +27,7 @@
    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2.css">
    <link rel="stylesheet" href="<%- url %>/vendor/select2/select2-bootstrap.css">
    <!-- Custom styles for this template -->
+    <%- include build/cover-header %>
    <link rel="stylesheet" href="<%- url %>/css/cover.css">
    <link rel="stylesheet" href="<%- url %>/css/site.css">
 </head>
@ -194,31 +195,18 @@
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <% if(useCDN) { %>
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
    <script src="//cdn.jsdelivr.net/velocity/1.3.1/velocity.min.js" defer></script>
 	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js" defer></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/js-url/2.3.0/url.min.js" defer></script>
 	<% } else { %>
-	<script src="<%- url %>/vendor/jquery/dist/jquery.min.js" defer></script>
    <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
-	<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
-	<script src="<%- url %>/vendor/select2/select2.min.js" defer></script>
 	<script src="<%- url %>/vendor/moment/min/moment-with-locales.min.js" defer></script>
-	<script src="<%- url %>/vendor/js-url/url.min.js" defer></script>
 	<% } %>
-    <script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
-    <script src="<%- url %>/vendor/list.js/dist/list.min.js" defer></script>
-    <script src="<%- url %>/vendor/list.pagination.js/dist/list.pagination.min.js" defer></script>
-    <script src="<%- url %>/vendor/file-saver/FileSaver.min.js" defer></script>
-    <script src="<%- url %>/vendor/store-js/store.min.js" defer></script>
-    <script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
-    <script src="<%- url %>/js/config.js" defer></script>
-    <script src="<%- url %>/js/common.js" defer></script>
-    <script src="<%- url %>/js/history.js" defer></script>
-    <script src="<%- url %>/js/cover.js" defer></script>
-    <script src="<%- url %>/js/locale.js" defer></script>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" defer></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
+    <%- include build/cover-scripts %>
 </body>

 </html>
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@ -18,23 +18,20 @@
    <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
 	<link rel="apple-touch-icon" href="<%- url %>/apple-touch-icon.png">
 	<% if(useCDN) { %>
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
 	<% } else { %>
-	<link rel="stylesheet" href='<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css'>
-    <link rel="stylesheet" href='<%- url %>/vendor/font-awesome/css/font-awesome.min.css'>
    <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
 	<% } %>
+	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href='<%- url %>/css/github-extract.css'>
    <link rel="stylesheet" href='<%- url %>/css/gist.css'>
-    <link rel="stylesheet" href='<%- url %>/vendor/highlightjs/styles/github-gist.css'>
-    <link rel="stylesheet" href="<%- url %>/vendor/prism/themes/prism.css">
    <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
    <link rel="stylesheet" href='<%- url %>/css/markdown.css'>
    <link rel="stylesheet" href='<%- url %>/vendor/emojify/css/emojify.min.css'>
+    <%- include build/pretty-header %>
    <link rel="stylesheet" href='<%- url %>/css/extra.css'>
    <link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
    <link rel="stylesheet" href='<%- url %>/css/site.css'>
@ -92,53 +89,20 @@
    MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});
 </script>
 <% if(useCDN) { %>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.6.1/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
 <% } else { %>
-<script src="<%- url %>/vendor/jquery/dist/jquery.min.js"></script>
-<script src="<%- url %>/vendor/bootstrap/dist/js/bootstrap.min.js" defer></script>
 <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
 <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
 <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
 <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
 <% } %>
-<script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
-<script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it/dist/markdown-it.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-abbr/dist/markdown-it-abbr.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-footnote/dist/markdown-it-footnote.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-deflist/dist/markdown-it-deflist.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mark/dist/markdown-it-mark.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
-<script src="<%- url %>/vendor/markdown-it-imsize.js" defer></script>
-<script src="<%- url %>/vendor/gist-embed/gist-embed.min.js" defer></script>
-<script src="<%- url %>/vendor/string/dist/string.min.js" defer></script>
-<script src="<%- url %>/vendor/highlightjs/highlight.pack.min.js" defer></script>
-<script src="<%- url %>/vendor/prism/prism.js" defer></script>
-<script src="<%- url %>/vendor/prism/components/prism-wiki.min.js" defer></script>
-<script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
-<script src="<%- url %>/vendor/emojify/js/emojify.min.js" defer></script>
-<script src="<%- url %>/vendor/raphael/raphael.min.js" defer></script>
-<script src="<%- url %>/vendor/lodash/dist/lodash.min.js" defer></script>
-<script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
-<script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
-<script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
-<script src="<%- url %>/vendor/pdfobject/pdfobject.min.js" defer></script>
-<script src="<%- url %>/vendor/md-toc.js" defer></script>
-<script src="<%- url %>/js/config.js" defer></script>
-<script src="<%- url %>/js/common.js" defer></script>
-<script src="<%- url %>/js/extra.js" defer></script>
-<script src="<%- url %>/js/render.js" defer></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" defer></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js" defer></script>
+<%- include build/pretty-scripts %>
 <script src="<%- url %>/js/reveal-markdown.js" defer></script>
-<script src="<%- url %>/js/pretty.js" defer></script>
-
 <%- include ga %>
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@ -87,54 +87,24 @@
            MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});
        </script>
        <% if(useCDN) { %>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/velocity/1.3.1/velocity.min.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.6.1/js-yaml.min.js" defer></script>
        <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/6.0.0/mermaid.min.js" defer></script>
        <% } else { %>
-        <script src="<%- url %>/vendor/jquery/dist/jquery.min.js"></script>
+        <script src="<%- url %>/vendor/reveal.js/lib/js/head.min.js"></script>
+        <script src="<%- url %>/vendor/reveal.js/js/reveal.js"></script>
        <script src="<%- url %>/vendor/velocity/velocity.min.js" defer></script>
        <script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
        <script type="text/javascript" src="<%- url %>/vendor/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
        <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
        <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
        <% } %>
-        <script src="<%- url %>/vendor/bootstrap/tooltip.min.js"></script>
-        <script src="<%- url %>/vendor/reveal.js/lib/js/head.min.js"></script>
-        <script src="<%- url %>/vendor/reveal.js/js/reveal.js"></script>
-        <script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it/dist/markdown-it.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-abbr/dist/markdown-it-abbr.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-footnote/dist/markdown-it-footnote.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-deflist/dist/markdown-it-deflist.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-mark/dist/markdown-it-mark.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
-        <script src="<%- url %>/vendor/markdown-it-imsize.js" defer></script>
-        <script src="<%- url %>/vendor/gist-embed/gist-embed.min.js" defer></script>
-        <script src="<%- url %>/vendor/string/dist/string.min.js" defer></script>
-        <script src="<%- url %>/vendor/highlightjs/highlight.pack.min.js" defer></script>
-        <script src="<%- url %>/vendor/js-cookie/src/js.cookie.js" defer></script>
-        <script src="<%- url %>/vendor/emojify/js/emojify.min.js" defer></script>
-        <script src="<%- url %>/vendor/raphael/raphael.min.js" defer></script>
-        <script src="<%- url %>/vendor/lodash/dist/lodash.min.js" defer></script>
-        <script src="<%- url %>/vendor/sequence-diagrams/sequence-diagram-min.js" defer></script>
-        <script src="<%- url %>/vendor/flowchart/release/flowchart.min.js" defer></script>
-        <script src="<%- url %>/vendor/viz.js/viz.js" defer></script>
-        <script src="<%- url %>/vendor/pdfobject/pdfobject.min.js" defer></script>
-        <script src="<%- url %>/vendor/md-toc.js" defer></script>
-        <script src="<%- url %>/js/config.js" defer></script>
-        <script src="<%- url %>/js/common.js" defer></script>
-        <script src="<%- url %>/js/extra.js" defer></script>
-        <script src="<%- url %>/js/render.js" defer></script>
-        <script src="<%- url %>/js/slide.js" defer></script>
-        
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js" defer></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/viz.js/1.3.0/viz.js" defer></script>
+        <%- include build/slide-scripts %>
    </body>
 </html>

--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,3 @@
+var baseConfig = require('./webpackBaseConfig');
+
+module.exports = baseConfig;
--- a/webpack.production.js
+++ b/webpack.production.js
@ -0,0 +1,91 @@
+var baseConfig = require('./webpackBaseConfig');
+var webpack = require('webpack');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = Object.assign({}, baseConfig, {
+    plugins: [
+        new webpack.ProvidePlugin({
+            '_': 'lodash',
+            Visibility: "visibilityjs",
+            Cookies: "js-cookie",
+            emojify: "emojify.js",
+            key: "keymaster"
+        }),
+        new ExtractTextPlugin("[name].css"),
+        new webpack.optimize.CommonsChunkPlugin({
+            names: ["vendor", "public", "slide", "locale"],
+            children: true,
+            async: true,
+            filename: '[name].js',
+            minChunks: Infinity
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
+            inject: false
+        }),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify('production')
+            }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            },
+            mangle: false,
+            sourceMap: false
+        })
+    ],
+
+    output: {
+        path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
+        filename: '[id].[name].[hash].js'
+    },
+});
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@ -0,0 +1,174 @@
+var webpack = require('webpack');
+var path = require('path');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    plugins: [
+        new webpack.ProvidePlugin({
+            Visibility: "visibilityjs",
+            Cookies: "js-cookie",
+            emojify: "emojify.js",
+            key: "keymaster",
+            $: "jquery",
+            jQuery: "jquery",
+            "window.jQuery": "jquery"
+        }),
+        new ExtractTextPlugin("[name].css"),
+        new webpack.optimize.CommonsChunkPlugin({
+            names: ["vendor", "public", "slide", "locale"],
+            children: true,
+            async: true,
+            filename: '[name].js',
+            minChunks: Infinity
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'index'],
+            filename: path.join(__dirname, 'public/views/build/index-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'locale'],
+            filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'public'],
+            filename: path.join(__dirname, 'public/views/build/pretty-scripts.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/header.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
+            inject: false
+        }),
+        new HtmlWebpackPlugin({
+            template: 'public/views/includes/scripts.ejs',
+            chunks: ['vendor', 'slide'],
+            filename: path.join(__dirname, 'public/views/build/slide-scripts.ejs'),
+            inject: false
+        })
+    ],
+
+    entry: {
+        index: path.join(__dirname, 'public/js/index.js'),
+        public: path.join(__dirname, 'public/js/public.js'),
+        slide: path.join(__dirname, 'public/js/slide.js'),
+        locale: path.join(__dirname, 'public/js/locale.js'),
+        vendor: [
+            "jquery-mousewheel",
+            "jquery-scrollspy/jquery-scrollspy",
+            "jquery-ui/ui/widgets/resizable",
+            "jquery-ui/ui/widgets/tooltip",
+            "jquery-ui/ui/widgets/controlgroup",
+            "jquery-ui/ui/widgets/autocomplete",
+            "script!gist-embed",
+            "expose?filterXSS!xss",
+            "js-url",
+            "expose?Spinner!spin.js",
+            "script!Idle.Js",
+            "expose?LZString!lz-string",
+            "expose?ListPagination!list.pagination.js/dist/list.pagination.js",
+            "script!codemirror",
+            "script!select2",
+            "script!inlineAttachment",
+            "script!jqueryTextcomplete",
+            "script!codemirrorSpellChecker",
+            "script!codemirrorInlineAttachment",
+            "script!ot",
+            "flowchart.js",
+            "js-sequence-diagrams"
+        ]
+    },
+
+    output: {
+        path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
+        filename: '[name].js'
+    },
+
+    resolve: {
+        modulesDirectories: [
+            path.resolve(__dirname, 'src'),
+            path.resolve(__dirname, 'node_modules')
+        ],
+        extensions: ["", ".js"],
+        alias: {
+            codemirror: path.join(__dirname, 'public/vendor/codemirror/codemirror.min.js'),
+            select2: path.join(__dirname, 'public/vendor/select2/select2.min.js'),
+            inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
+            jqueryTextcomplete: path.join(__dirname, 'public/vendor/jquery-textcomplete/jquery.textcomplete.js'),
+            codemirrorSpellChecker: path.join(__dirname, 'public/vendor/codemirror-spell-checker/spell-checker.min.js'),
+            codemirrorInlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
+            ot: path.join(__dirname, 'public/vendor/ot/ot.min.js')
+        }
+    },
+
+    externals: {
+        "viz.js": "Viz",
+        "socket.io-client": "io",
+        "lodash": "_",
+        "jquery": "$"
+    },
+
+    module: {
+        loaders: [{
+            test: /\.json$/,
+            loader: 'json-loader'
+        }, {
+            test: /\.css$/,
+            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+        }, {
+            test: /\.scss$/,
+            loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
+        }, {
+            test: /\.less$/,
+            loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
+        }, {
+            test: require.resolve("js-sequence-diagrams"),
+            loader: "imports?Raphael=raphael"
+        }, {
+            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+            loader: "file"
+        }, {
+            test: /\.(woff|woff2)$/,
+            loader: "url?prefix=font/&limit=5000"
+        }, {
+            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+            loader: "url?limit=10000&mimetype=application/octet-stream"
+        }, {
+            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+            loader: "url?limit=10000&mimetype=image/svg+xml"
+        }],
+
+        noParse: [
+            "gist-embed"
+        ]
+    },
+
+    node: {
+        fs: "empty"
+    }
+};