Merge pull request #242 from Yukaii/webpack-stylesheet

Use webpack to bundle stylesheet

15 files changed, 100 insertions, 89 deletions

diff --git a/.editorconfig b/.editorconfig
index e8019ba7..619c178d 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,3 +9,7 @@ insert_final_newline = true
 
 [*.md]
 trim_trailing_whitespace = false
+
+[{.travis.yml,npm-shrinkwrap.json,package.json}]
+indent_style = space
+indent_size = 2
diff --git a/package.json b/package.json
index 96b9c7e2..57e31ccf 100644
--- a/package.json
+++ b/package.json
@@ -137,6 +137,7 @@
     "json-loader": "^0.5.4",
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
     "script-loader": "^0.7.0",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
diff --git a/public/js/cover.js b/public/js/cover.js
index c02f6c81..6bc55dd9 100644
--- a/public/js/cover.js
+++ b/public/js/cover.js
@@ -1,5 +1,8 @@
 require('./locale');
 
+require('../css/cover.css');
+require('../css/site.css');
+
 var common = require('./common');
 var checkIfAuth = common.checkIfAuth;
 var urlpath = common.urlpath;
diff --git a/public/js/extra.js b/public/js/extra.js
index 01363886..81dd4a28 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -588,7 +588,7 @@ function exportToHTML(view) {
     var tocAffix = $('#ui-toc-affix').clone();
     tocAffix.find('*').removeClass('active').find("a[href^='#'][smoothhashscroll]").removeAttr('smoothhashscroll');
     //generate html via template
-    $.get(serverurl + '/css/html.min.css', function (css) {
+    $.get(serverurl + '/build/html.min.css', function (css) {
         $.get(serverurl + '/views/html.hbs', function (data) {
             var template = Handlebars.compile(data);
             var context = {
diff --git a/public/js/htmlExport.js b/public/js/htmlExport.js
new file mode 100644
index 00000000..e9fc41c6
--- /dev/null
+++ b/public/js/htmlExport.js
@@ -0,0 +1,5 @@
+require('../css/github-extract.css');
+require('../css/markdown.css');
+require('../css/extra.css');
+require('../css/slide-preview.css');
+require('../css/site.css');
diff --git a/public/js/index.js b/public/js/index.js
index bb2a31f6..9c77ba8d 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,6 +1,11 @@
 /* jquery and jquery plugins */
 require('../vendor/showup/showup');
 
+require('../css/index.css');
+require('../css/extra.css');
+require('../css/slide-preview.css');
+require('../css/site.css');
+
 var toMarkdown = require('to-markdown');
 
 var saveAs = require('file-saver').saveAs;
@@ -2306,7 +2311,7 @@ socket.on('delete', function () {
             saveHistory(newnotehistory);
             location.href = serverurl;
         });
-    }   
+    }
 });
 var retryTimer = null;
 socket.on('maintenance', function () {
diff --git a/public/js/pretty.js b/public/js/pretty.js
index 59403586..f7d31902 100644
--- a/public/js/pretty.js
+++ b/public/js/pretty.js
@@ -1,3 +1,7 @@
+require('../css/extra.css');
+require('../css/slide-preview.css');
+require('../css/site.css');
+
 /* other vendors plugin */
 var S = require('string');
 
diff --git a/public/js/slide.js b/public/js/slide.js
index 16ea6b8f..b9521e64 100644
--- a/public/js/slide.js
+++ b/public/js/slide.js
@@ -1,3 +1,6 @@
+require('../css/extra.css');
+require('../css/site.css');
+require('../css/slide.css');
 
 /* other vendors plugin */
 var S = require('string');
diff --git a/public/views/head.ejs b/public/views/head.ejs
index 00571186..77cc1cf0 100644
--- a/public/views/head.ejs
+++ b/public/views/head.ejs
@@ -35,11 +35,9 @@
 <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">
-<link rel="stylesheet" href="<%- url %>/css/site.css">
+
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
diff --git a/public/views/index.ejs b/public/views/index.ejs
index 9b411bb8..1b04886a 100644
--- a/public/views/index.ejs
+++ b/public/views/index.ejs
@@ -30,8 +30,6 @@
     <% } %>
     <!-- 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>
 
 <body>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index d03be9c4..c70553be 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -32,9 +32,6 @@
     <link rel="stylesheet" href='<%- url %>/css/markdown.css'>
     <link rel="stylesheet" href='<%- url %>/vendor/emojify.js/dist/css/basic/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'>
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 	<!--[if lt IE 9]>
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
index 1fdb7f8f..4545ade7 100644
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@@ -36,9 +36,8 @@
         <link rel="stylesheet" href="<%- url %>/css/mermaid.css">
         <link rel="stylesheet" href='<%- url %>/css/markdown.css'>
         <link rel="stylesheet" href='<%- url %>/vendor/emojify.js/dist/css/basic/emojify.min.css'>
-        <link rel="stylesheet" href='<%- url %>/css/extra.css'>
-        <link rel="stylesheet" href="<%- url %>/css/site.css">
-        <link rel="stylesheet" href="<%- url %>/css/slide.css">
+
+        <%- include build/slide-header %>
 
         <!-- Printing and PDF exports -->
 		<script>
diff --git a/webpack.config.js b/webpack.config.js
index d2cf3dc7..236490b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,33 @@
 var baseConfig = require('./webpackBaseConfig');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var path = require('path');
 
-module.exports = baseConfig;
+module.exports = [Object.assign({}, baseConfig, {
+    plugins: baseConfig.plugins.concat([
+        new ExtractTextPlugin("[name].css")
+    ])
+}), {
+    entry: {
+        htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
+    },
+    module: {
+        loaders: [{
+            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')
+        }]
+    },
+    output: {
+        path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
+        filename: '[name].js'
+    },
+    plugins: [
+        new ExtractTextPlugin("html.min.css")
+    ]
+}];
diff --git a/webpack.production.js b/webpack.production.js
index 82e52d17..13aad6bd 100644
--- a/webpack.production.js
+++ b/webpack.production.js
@@ -1,77 +1,11 @@
 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');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
-module.exports = Object.assign({}, baseConfig, {
-    plugins: [
-        new webpack.ProvidePlugin({
-            Visibility: "visibilityjs",
-            Cookies: "js-cookie",
-            key: "keymaster",
-            $: "jquery",
-            jQuery: "jquery",
-            "window.jQuery": "jquery",
-            "moment": "moment",
-            "Handlebars": "handlebars"
-        }),
-        new ExtractTextPlugin("[name].css"),
-        new webpack.optimize.CommonsChunkPlugin({
-            names: ["cover", "index", "pretty", "slide", "vendor"],
-            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', 'cover'],
-            filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
-            inject: false
-        }),
-        new HtmlWebpackPlugin({
-            template: 'public/views/includes/scripts.ejs',
-            chunks: ['vendor', 'cover'],
-            filename: path.join(__dirname, 'public/views/build/cover-scripts.ejs'),
-            inject: false
-        }),
-        new HtmlWebpackPlugin({
-            template: 'public/views/includes/header.ejs',
-            chunks: ['vendor', 'pretty'],
-            filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
-            inject: false
-        }),
-        new HtmlWebpackPlugin({
-            template: 'public/views/includes/scripts.ejs',
-            chunks: ['vendor', 'pretty'],
-            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
-        }),
+module.exports = [Object.assign({}, baseConfig, {
+    plugins: baseConfig.plugins.concat([
         new webpack.DefinePlugin({
             'process.env': {
                 'NODE_ENV': JSON.stringify('production')
@@ -83,12 +17,43 @@ module.exports = Object.assign({}, baseConfig, {
             },
             mangle: false,
             sourceMap: false
-        })
-    ],
+        }),
+        new ExtractTextPlugin("[name].[hash].css")
+    ]),
 
     output: {
         path: path.join(__dirname, 'public/build'),
         publicPath: '/build/',
         filename: '[id].[name].[hash].js'
+    }
+}), {
+    entry: {
+        htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
+    },
+    module: {
+        loaders: [{
+            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')
+        }]
+    },
+    output: {
+        path: path.join(__dirname, 'public/build'),
+        publicPath: '/build/',
+        filename: '[name].js'
     },
-});
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': {
+                'NODE_ENV': JSON.stringify('production')
+            }
+        }),
+        new ExtractTextPlugin("html.min.css"),
+        new OptimizeCssAssetsPlugin()
+    ]
+}];
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 4cc943dc..560635ca 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -15,7 +15,6 @@ module.exports = {
             "moment": "moment",
             "Handlebars": "handlebars"
         }),
-        new ExtractTextPlugin("[name].css"),
         new webpack.optimize.CommonsChunkPlugin({
             names: ["cover", "index", "pretty", "slide", "vendor"],
             children: true,