From 43c9f68b9a67fa7f5b3e5a7f0dc6d5f8c9114d20 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Thu, 13 Oct 2016 08:56:56 +0800 Subject: [PATCH] Refactor webpack module --- public/js/extra.js | 93 ++++++++++++++++++------------------- public/js/index.js | 16 ++----- public/js/public.js | 4 -- public/js/slide.js | 8 ---- webpack.production.js | 5 +- webpackBaseConfig.js | 104 +++++++++++++++++++++++++++++++----------- 6 files changed, 132 insertions(+), 98 deletions(-) diff --git a/public/js/extra.js b/public/js/extra.js index 1dd867600..24d53fe70 100644 --- a/public/js/extra.js +++ b/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; @@ -262,49 +263,49 @@ 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"); @@ -434,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 = $('
'); - $(this).append(inner); - PDFObject.embed(url, inner, { - height: '400px' + .each(function (key, value) { + var url = $(value).attr('data-pdfurl'); + var inner = $('
'); + $(this).append(inner); + PDFObject.embed(url, inner, { + height: '400px' + }); }); - }); //syntax highlighting view.find("pre.raw").removeClass("raw") .each(function (key, value) { diff --git a/public/js/index.js b/public/js/index.js index f8f997d8c..626799c4b 100644 --- a/public/js/index.js +++ b/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 diff --git a/public/js/public.js b/public/js/public.js index 83d941443..5fd3fd79b 100644 --- a/public/js/public.js +++ b/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'); diff --git a/public/js/slide.js b/public/js/slide.js index 6230d1599..1f4892f94 100644 --- a/public/js/slide.js +++ b/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'); diff --git a/webpack.production.js b/webpack.production.js index 173ca0cd6..1c2190ab7 100644 --- a/webpack.production.js +++ b/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 }) ], diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js index 33753ef59..8f377d3cb 100644 --- a/webpackBaseConfig.js +++ b/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'), - path.join(__dirname, 'public/vendor/select2/select2.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/codemirror-spell-checker/spell-checker.min.js'), - path.join(__dirname, 'public/vendor/inlineAttachment/codemirror.inline-attachment.js'), - path.join(__dirname, 'public/vendor/ot/ot.min.js') + "script!codemirror", + "script!select2", + "script!inlineAttachment", + "script!jqueryTextcomplete", + "script!codemirrorSpellChecker", + "script!codemirrorInlineAttachment", + "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", - include: [ - 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') - ] - }] + }], + + noParse: [ + "gist-embed" + ] }, node: {