Refactor webpack module

public/js/extra.js

@@ -2,6 +2,7 @@ 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;

public/js/index.js

@@ -7,25 +7,16 @@ require('bootstrap/dist/css/bootstrap.css');
 require('prismjs/themes/prism.css');
 require('highlight.js/styles/github-gist.css');
 
-/* other vendors plugin */
-require('gist-embed');
-require('string');
 require('prismjs');
 require('prismjs/components/prism-wiki');
-require('to-markdown');
+var toMarkdown = require('to-markdown');
 
-require('raphael');
-require('js-sequence-diagrams');
-
-require('flowchart.js');
 var saveAs = require('file-saver').saveAs;
-require('store');
 require('js-url');
-require('visibilityjs');
-var List = require('list.js');
-require('../vendor/md-toc');
 require('randomcolor');
 
+var List = require('list.js');
+
 var common = require('./common.js');
 var urlpath = common.urlpath;
 var noteid = common.noteid;
@@ -2268,6 +2259,7 @@ function havePermission() {
 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

public/js/public.js

@@ -15,10 +15,6 @@ require('prismjs');
 require('prismjs/components/prism-wiki');
 require('to-markdown');
 
-require('raphael');
-require('js-sequence-diagrams');
-
-require('flowchart.js');
 require('file-saver');
 require('store');
 require('js-url');

public/js/slide.js

@@ -4,19 +4,11 @@ require('bootstrap/dist/css/bootstrap.css');
 require('prismjs/themes/prism.css');
 
 /* other vendors plugin */
-require('gist-embed');
 var S = require('string');
 require('prismjs');
 require('prismjs/components/prism-wiki');
 require('to-markdown');
 
-require('raphael');
-require('js-sequence-diagrams');
-
-require('flowchart.js');
-require('file-saver');
-require('store');
-require('visibilityjs');
 require('../vendor/md-toc');
 require('randomcolor');
 

webpack.production.js

@@ -11,12 +11,12 @@ module.exports = Object.assign({}, baseConfig, {
             Visibility: "visibilityjs",
             Cookies: "js-cookie",
             emojify: "emojify.js",
-            io: "socket.io-client",
             key: "keymaster"
         }),
         new ExtractTextPlugin("[name].css"),
         new webpack.optimize.CommonsChunkPlugin({
-            name: ["vendor", "public", "slide", "locale"],
+            names: ["vendor", "public", "slide", "locale"],
+            children: true,
             async: true,
             filename: '[name].js',
             minChunks: Infinity
@@ -78,6 +78,7 @@ module.exports = Object.assign({}, baseConfig, {
             compress: {
                 warnings: false
             },
+            mangle: false,
             sourceMap: false
         })
     ],

webpackBaseConfig.js

@@ -1,6 +1,7 @@
 var webpack = require('webpack');
 var path = require('path');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
     plugins: [
@@ -9,15 +10,63 @@ module.exports = {
             Visibility: "visibilityjs",
             Cookies: "js-cookie",
             emojify: "emojify.js",
-            io: "socket.io-client",
             key: "keymaster"
         }),
         new ExtractTextPlugin("[name].css"),
         new webpack.optimize.CommonsChunkPlugin({
-            name: ["vendor", "public", "slide", "locale"],
+            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
         })
     ],
 
@@ -34,21 +83,23 @@ module.exports = {
             "jquery-ui/ui/widgets/tooltip",
             "jquery-ui/ui/widgets/controlgroup",
             "jquery-ui/ui/widgets/autocomplete",
-            "expose?LZString!lz-string",
+            "script!gist-embed",
             "expose?filterXSS!xss",
             "js-url",
             "bootstrap",
             "expose?Spinner!spin.js",
             "script!Idle.Js",
-            "expose?Viz!viz.js",
+            "expose?LZString!lz-string",
             "expose?ListPagination!list.pagination.js/dist/list.pagination.js",
-            path.join(__dirname, 'public/vendor/codemirror/codemirror.min.js'),
+            "script!codemirror",
-            path.join(__dirname, 'public/vendor/select2/select2.min.js'),
+            "script!select2",
-            path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
+            "script!inlineAttachment",
-            path.join(__dirname, 'public/vendor/jquery-textcomplete/jquery.textcomplete.js'),
+            "script!jqueryTextcomplete",
-            path.join(__dirname, 'public/vendor/codemirror-spell-checker/spell-checker.min.js'),
+            "script!codemirrorSpellChecker",
-            path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
+            "script!codemirrorInlineAttachment",
-            path.join(__dirname, 'public/vendor/ot/ot.min.js')
+            "script!ot",
+            "flowchart.js",
+            "js-sequence-diagrams"
         ]
     },
 
@@ -59,11 +110,20 @@ module.exports = {
     },
 
     resolve: {
-        root: [
+        modulesDirectories: [
             path.resolve(__dirname, 'src'),
             path.resolve(__dirname, 'node_modules')
         ],
-        extensions: ["", ".js"]
+        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: {
@@ -98,19 +158,11 @@ module.exports = {
         }, {
             test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
             loader: "url?limit=10000&mimetype=image/svg+xml"
-        }, {
+        }],
-            test: /\.js/,
+
-            loader: "script-loader",
+        noParse: [
-            include: [
+            "gist-embed"
-                path.join(__dirname, 'public/vendor/codemirror/codemirror.min.js'),
-                path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
-                path.join(__dirname, 'public/vendor/jquery-textcomplete/jquery.textcomplete.js'),
-                path.join(__dirname, 'public/vendor/select2/select2.min.js'),
-                path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'),
-                path.join(__dirname, 'public/vendor/codemirror-spell-checker/spell-checker.min.js'),
-                path.join(__dirname, 'public/vendor/ot/ot.min.js')
         ]
-        }]
     },
 
     node: {