Merge pull request #840 from weseek/support/optimize-webpack-configuration

Support/optimize webpack configuration

CHANGES.md

@@ -1,14 +1,27 @@
 CHANGES
 ========
 
+## 3.3.10-RC
+
+* Support: Use mini-css-extract-plugin instead of extract extract-text-webpack-plugin
+* Support: Use terser-webpack-plugin instead of uglifyjs-webpack-plugin
+* Support: Upgrade libs
+    * webpack
+    * webpack-assets-manifest
+    * webpack-cli
+    * webpack-merge
+
 ## 3.3.9
 
 * Fix: Import from Qiita:Team doesn't work
     * Introduced by 3.3.0
+* Fix: Typeahead shows autocomplete wrongly
+    * Introduced by 3.3.8
+* Support: Upgrade libs
+    * react-bootstrap-typeahead
 
 ## 3.3.8
 
-* Fix: Typeahead shows autocomplete wrongly
 * Fix: Move/Duplicate don't work
     * Introduced by 3.3.7
 * Fix: Server doesn't respond when root page is restricted

config/webpack.common.js

@@ -29,7 +29,7 @@ module.exports = (options) => {
       'js/hackmd-agent':              './src/client/js/hackmd-agent',
       'js/hackmd-styles':             './src/client/js/hackmd-styles',
       // styles
-      'styles/style':                 './src/client/styles/scss/style.scss',
+      'styles/style-app':             './src/client/styles/scss/style-app.scss',
       'styles/style-presentation':    './src/client/styles/scss/style-presentation.scss',
       // themes
       'styles/theme-default':         './src/client/styles/scss/theme/default.scss',
@@ -100,16 +100,6 @@ module.exports = (options) => {
           test: /switchery\.js$/,
           loader: 'imports-loader?module=>false,exports=>false,define=>false,this=>window'
         },
-        {
-          test: /\.css$/,
-          use: ['style-loader', 'css-loader'],
-          exclude: [helpers.root('src/client/styles')]
-        },
-        {
-          test: /\.scss$/,
-          use: ['style-loader', 'css-loader', 'sass-loader'],
-          exclude: [helpers.root('src/client/styles')]
-        },
         /*
          * File loader for supporting images, for example, in CSS files.
          */
@@ -153,8 +143,19 @@ module.exports = (options) => {
       namedModules: true,
       splitChunks: {
         cacheGroups: {
+          style_commons: {
+            test: /\.(sc|sa|c)ss$/,
+            chunks: (chunk) => {
+              // ignore patterns
+              return chunk.name != null && !chunk.name.match(/style-|theme-|legacy-admin|legacy-presentation/);
+            },
+            name: 'styles/style-commons',
+            minSize: 1,
+            priority: 30,
+            enforce: true
+          },
           commons: {
-            test: /src/,
+            test: /src[\\/].*\.jsx?$/,
             chunks: 'initial',
             name: 'js/commons',
             minChunks: 2,
@@ -162,17 +163,16 @@ module.exports = (options) => {
             priority: 20
           },
           vendors: {
-            test: /node_modules/,
+            test: /node_modules[\\/].*\.jsx?$/,
             chunks: (chunk) => {
               // ignore patterns
               return chunk.name != null && !chunk.name.match(/legacy-presentation|ie11-polyfill|hackmd-/);
             },
             name: 'js/vendors',
-            // minChunks: 2,
             minSize: 1,
             priority: 10,
             enforce: true
-          }
+          },
         }
       },
       minimizer: options.optimization.minimizer || [],

config/webpack.dev.js

@@ -2,14 +2,13 @@
  * @author: Yuki Takei <yuki@weseek.co.jp>
  */
 
-const path = require('path');
 const webpack = require('webpack');
 const helpers = require('../src/lib/util/helpers');
 
 /*
  * Webpack Plugins
  */
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 /**
@@ -29,29 +28,34 @@ module.exports = require('./webpack.common')({
   module: {
     rules: [
       {
-        test: /\.scss$/,
+        test: /\.(css|scss)$/,
         use: [
           'style-loader',
           { loader: 'css-loader', options: { sourceMap: true } },
           { loader: 'sass-loader', options: { sourceMap: true } },
         ],
-        include: [helpers.root('src/client/styles/scss')]
+        exclude: [
+          helpers.root('src/client/styles/hackmd'),
+          helpers.root('src/client/styles/scss/style-presentation.scss'),
+        ]
       },
       { // Dump CSS for HackMD
-        test: /\.scss$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            'css-loader',
-            'sass-loader'
-          ]
-        }),
-        include: [helpers.root('src/client/styles/hackmd')]
+        test: /\.(css|scss)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ],
+        include: [
+          helpers.root('src/client/styles/hackmd'),
+          helpers.root('src/client/styles/scss/style-presentation.scss'),
+        ]
       },
     ],
   },
   plugins: [
 
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: '[name].bundle.css',
     }),
 

config/webpack.prod.js

@@ -6,8 +6,8 @@ const helpers = require('../src/lib/util/helpers');
 /**
  * Webpack Plugins
  */
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -26,26 +26,30 @@ module.exports = require('./webpack.common')({
   module: {
     rules: [
       {
-        test: /\.scss$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            'css-loader',
-            { loader: 'postcss-loader', options: {
-              sourceMap: false,
-              plugins: (loader) => [
-                require('autoprefixer')()
-              ]
-            } },
-            'sass-loader'
-          ]
-        }),
-        include: [helpers.root('src/client/styles/scss'), helpers.root('src/client/styles/hackmd')]
-      }
+        test: /\.(css|scss)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          { loader: 'postcss-loader', options: {
+            sourceMap: false,
+            plugins: (loader) => [
+              require('autoprefixer')()
+            ]
+          } },
+          'sass-loader'
+        ],
+        exclude: [helpers.root('src/client/js/legacy')]
+      },
+      {
+        test: /\.(css|scss)$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+        include: [helpers.root('src/client/js/legacy')]
+      },
     ]
   },
   plugins: [
 
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: '[name].[hash].css',
     }),
 
@@ -58,10 +62,7 @@ module.exports = require('./webpack.common')({
   ],
   optimization: {
     minimizer: [
-      new UglifyJsPlugin({
-        cache: true,
-        parallel: true,
-      }),
+      new TerserPlugin({}),
       new OptimizeCSSAssetsPlugin({})
     ],
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "3.3.9-RC",
+  "version": "3.3.10-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",
@@ -149,7 +149,6 @@
     "eazy-logger": "^3.0.2",
     "eslint": "^5.0.0",
     "eslint-plugin-react": "^7.7.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^2.0.0",
     "handsontable": "^6.0.1",
     "i18next-browser-languagedetector": "^2.2.0",
@@ -170,6 +169,7 @@
     "markdown-it-toc-and-anchor-with-slugid": "^1.1.4",
     "markdown-table": "^1.1.1",
     "metismenu": "^3.0.3",
+    "mini-css-extract-plugin": "^0.5.0",
     "mocha": "^5.2.0",
     "morgan": "^1.9.0",
     "node-dev": "^3.1.3",
@@ -184,7 +184,7 @@
     "postcss-loader": "^3.0.0",
     "react": "^16.7.0",
     "react-bootstrap": "^0.32.1",
-    "react-bootstrap-typeahead": "^3.3.2",
+    "react-bootstrap-typeahead": "^3.3.4",
     "react-clipboard.js": "^2.0.0",
     "react-codemirror2": "^5.1.0",
     "react-dom": "^16.4.1",
@@ -201,14 +201,14 @@
     "socket.io-client": "^2.0.3",
     "stream-to-promise": "^2.2.0",
     "style-loader": "^0.23.0",
+    "terser-webpack-plugin": "^1.2.2",
     "throttle-debounce": "^2.0.0",
     "toastr": "^2.1.2",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.12.0",
-    "webpack-assets-manifest": "^3.0.1",
+    "webpack": "^4.29.3",
+    "webpack-assets-manifest": "^3.1.1",
     "webpack-bundle-analyzer": "^3.0.2",
-    "webpack-cli": "^3.0.8",
-    "webpack-merge": "~4.1.0"
+    "webpack-cli": "^3.2.3",
+    "webpack-merge": "^4.2.1"
   },
   "_moduleAliases": {
     "@root": ".",

src/client/js/hackmd-styles.js

@@ -20,7 +20,7 @@ const styles = '{{styles}}';         // will be replaced by swig
 function insertStyle() {
   const element = document.createElement('style');
   element.type = 'text/css';
-  element.appendChild(document.createTextNode(styles));
+  element.appendChild(document.createTextNode(unescape(styles)));
   document.getElementsByTagName('head')[0].appendChild(element);
 }
 

src/client/js/legacy/crowi-presentation.js

@@ -1,7 +1,5 @@
 const Reveal = require('reveal.js');
 
-require('reveal.js/css/reveal.css');
-require('reveal.js/css/theme/black.css');
 require('reveal.js/lib/js/head.min.js');
 require('reveal.js/lib/js/html5shiv.js');
 

src/client/js/legacy/crowi.js

@@ -2,9 +2,6 @@
 /* Author: Sotaro KARASAWA <sotarok@crocos.co.jp>
 */
 
-/* global crowi: true */
-/* global crowiRenderer: true */
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -58,6 +55,7 @@ Crowi.setCaretLineAndFocusToEditor = function() {
     return;
   }
 
+  const crowi = window.crowi;
   const line = pageEditorDom.getAttribute('data-caret-line') || 0;
   crowi.setCaretLine(+line);
   // reset data-caret-line attribute
@@ -272,6 +270,7 @@ Crowi.getCurrentEditorMode = function() {
 };
 
 $(function() {
+  const crowi = window.crowi;
   const config = JSON.parse(document.getElementById('crowi-context-hydrate').textContent || '{}');
 
   const pageId = $('#content-main').data('page-id');
@@ -541,6 +540,8 @@ $(function() {
     const isShown = $('#view-timeline').data('shown');
 
     if (growiRendererForTimeline == null) {
+      const crowi = window.crowi;
+      const crowiRenderer = window.crowiRenderer;
       growiRendererForTimeline = new GrowiRenderer(crowi, crowiRenderer, {mode: 'timeline'});
     }
 
@@ -763,7 +764,8 @@ window.addEventListener('load', function(e) {
     }
   }
 
-  if (crowi && crowi.users || crowi.users.length == 0) {
+  const crowi = window.crowi;
+  if (crowi && crowi.users && crowi.users.length != 0) {
     const totalUsers = crowi.users.length;
     const $listLiker = $('.page-list-liker');
     $listLiker.each(function(i, liker) {

src/client/styles/scss/_on-edit.scss

@@ -288,6 +288,11 @@ body.on-edit {
   display: block;
 }
 
+// overwrite .CodeMirror pre
+.CodeMirror pre {
+  font-family: $font-family-monospace;
+}
+
 // overwrite .CodeMirror-hints
 .CodeMirror-hints {
   max-height: 30em !important;

src/client/styles/scss/_search.scss

@@ -30,6 +30,7 @@
   }
   .rbt-menu {
     margin-top: 3px;
+
     li a span {
       .page-path {
         display: inline;
@@ -100,11 +101,6 @@
       width: 300px;
     }
   }
-  .rbt-menu {
-    margin-top: 33px;   // DIRTY HACK
-                        //   note: 'transform: translate3d(0px, XXpx, 0px)' calculation has failed on .search-top
-                        //         since upgrade react-bootstrap-typeahead to v3.3.2 -- 2019.02.05 Yuki Takei
-  }
 }
 .search-sidebar {
   .search-form, .form-group, .rbt-input.form-control, .input-group {
@@ -115,6 +111,17 @@
   }
 }
 
+@mixin search-typeahead-rbtmenu-mt($margin-top) {
+  .search-typeahead .rbt-menu {
+    margin-top: $margin-top;    // DIRTY HACK
+                                //   note: 'transform: translate3d(0px, XXpx, 0px)' calculation has failed
+                                //         since upgrade react-bootstrap-typeahead to v3.3.2 -- 2019.02.05 Yuki Takei
+  }
+}
+#search-top, #renamePage, #duplicatePage, .search-page-input {
+  @include search-typeahead-rbtmenu-mt(36px);
+}
+
 .search-result {
 
   .search-result-list {

src/client/styles/scss/style-presentation.scss

@@ -1,129 +1,132 @@
-// import Growi variable
-@import 'variables';
-
-.reveal {
-  font-size: 32px;
-  section * {
-    font-family: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
-  }
-
-  .slides > section {
-    //text-align: left;
-    padding: 0;
-
-    &.only.present {
-      h1, h2, h3, h4, h5, h6 {
-        font-size: 2.5em;
-      }
-    }
-
-    p {
-      line-height: 1.6;
-
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-
-    pre {
-      code {
-        padding: 20px 40px;
-      }
-    }
-    blockquote {
-      width: 80%;
-      padding: 20px 60px;
-    }
-
-    ul {
-      margin-top: .2em;
-      margin-bottom: .1em;
-      > li {
-        line-height: 1.6;
-        margin-bottom: .5em;
-
-        > ul > li {
-          font-size: .85em;
-        }
-      }
-    }
-
-    h1:first-child {
-      font-size: 2.2em;
-    }
-    h2:first-child {
-      font-size: 1.8em;
-    }
-    h3, h4, h5, h6 {
-      &:first-child {
-        font-size: 1.5em;
-      }
-    }
-
-    // {{{ table (copied from bootstrap .table
-    table {
-      width: 100%;
-      margin-bottom: 1em;
-
-      border-collapse: collapse;
-      tr, td, th {
-        border-collapse: collapse;
-      }
-
-      // Cells
-      > thead,
-      > tbody,
-      > tfoot {
-        > tr {
-          > th,
-          > td {
-            padding: 1em;
-            vertical-align: top;
-            border-top: 1px solid #999;
-          }
-        }
-      }
-      // Bottom align for column headings
-      > thead > tr > th {
-        vertical-align: bottom;
-        border-bottom: 2px solid #888;
-      }
-      // Remove top border from thead by default
-      > caption + thead,
-      > colgroup + thead,
-      > thead:first-child {
-        > tr:first-child {
-          > th,
-          > td {
-            border-top: 0;
-          }
-        }
-      }
-      // Account for multiple tbody instances
-      > tbody + tbody {
-        border-top: 2px solid #888;
-      }
-
-      // .table-bordered
-      border: 1px solid #999;
-      > thead,
-      > tbody,
-      > tfoot {
-        > tr {
-          > th,
-          > td {
-            border: 1px solid #999;
-          }
-        }
-      }
-      > thead > tr {
-        > th,
-        > td {
-          border-bottom-width: 2px;
-        }
-      }
-    }
-    // }}}
-
-  }
-}
+// import Growi variable
+@import 'variables';
+
+@import "~reveal.js/css/reveal.css";
+@import "~reveal.js/css/theme/black.css";
+
+.reveal {
+  font-size: 32px;
+  section * {
+    font-family: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
+  }
+
+  .slides > section {
+    //text-align: left;
+    padding: 0;
+
+    &.only.present {
+      h1, h2, h3, h4, h5, h6 {
+        font-size: 2.5em;
+      }
+    }
+
+    p {
+      line-height: 1.6;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    pre {
+      code {
+        padding: 20px 40px;
+      }
+    }
+    blockquote {
+      width: 80%;
+      padding: 20px 60px;
+    }
+
+    ul {
+      margin-top: .2em;
+      margin-bottom: .1em;
+      > li {
+        line-height: 1.6;
+        margin-bottom: .5em;
+
+        > ul > li {
+          font-size: .85em;
+        }
+      }
+    }
+
+    h1:first-child {
+      font-size: 2.2em;
+    }
+    h2:first-child {
+      font-size: 1.8em;
+    }
+    h3, h4, h5, h6 {
+      &:first-child {
+        font-size: 1.5em;
+      }
+    }
+
+    // {{{ table (copied from bootstrap .table
+    table {
+      width: 100%;
+      margin-bottom: 1em;
+
+      border-collapse: collapse;
+      tr, td, th {
+        border-collapse: collapse;
+      }
+
+      // Cells
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th,
+          > td {
+            padding: 1em;
+            vertical-align: top;
+            border-top: 1px solid #999;
+          }
+        }
+      }
+      // Bottom align for column headings
+      > thead > tr > th {
+        vertical-align: bottom;
+        border-bottom: 2px solid #888;
+      }
+      // Remove top border from thead by default
+      > caption + thead,
+      > colgroup + thead,
+      > thead:first-child {
+        > tr:first-child {
+          > th,
+          > td {
+            border-top: 0;
+          }
+        }
+      }
+      // Account for multiple tbody instances
+      > tbody + tbody {
+        border-top: 2px solid #888;
+      }
+
+      // .table-bordered
+      border: 1px solid #999;
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th,
+          > td {
+            border: 1px solid #999;
+          }
+        }
+      }
+      > thead > tr {
+        > th,
+        > td {
+          border-bottom-width: 2px;
+        }
+      }
+    }
+    // }}}
+
+  }
+}

src/server/routes/hackmd.js

@@ -7,7 +7,6 @@ const axios = require('axios');
 const ApiResponse = require('../util/apiResponse');
 
 module.exports = function(crowi, app) {
-  const config = crowi.getConfig();
   const Page = crowi.models.Page;
   const pageEvent = crowi.event('page');
 
@@ -72,7 +71,7 @@ module.exports = function(crowi, app) {
 
     // generate definitions to replace
     const definitions = {
-      styles,
+      styles: escape(styles),
     };
     // inject
     const script = stylesScriptContentTpl(definitions);

src/server/views/admin/customize.html

@@ -2,22 +2,18 @@
 
 {% block html_title %}{{ customTitle(t('Customize')) }} {% endblock %}
 
-{% block style_css_block %}
+{% block theme_css_block %}
   {% if 'kibela' === layoutType() %}
     {% if env === 'development' %}
-      <script src="{{ webpack_asset('styles/style.js') }}"></script>
       <script src="{{ webpack_asset('styles/theme-kibela.js') }}"></script>
     {% else %}
-      <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
-      <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('styles/theme-kibela.css') }}">
+      <link rel="stylesheet" href="{{ webpack_asset('styles/theme-kibela.css') }}">
     {% endif %}
   {% else %}
     {% if env === 'development' %}
-      <script src="{{ webpack_asset('styles/style.js') }}"></script>
       <script src="{{ webpack_asset('styles/theme-' + theme() + '.js') }}"></script>
     {% else %}
-      <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
-      <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('styles/theme-' + theme() + '.css') }}">
+    <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('styles/theme-' + theme() + '.css') }}">
     {% endif %}
   {% endif %}
 {% endblock %}

src/server/views/layout/layout.html

@@ -71,20 +71,25 @@
 
   <!-- styles -->
   {% block style_css_block %}
+    {% if env === 'development' %}
+      <script src="{{ webpack_asset('styles/style-commons.js') }}"></script>
+      <script src="{{ webpack_asset('styles/style-app.js') }}"></script>
+    {% else %}
+      <script src="{{ webpack_asset('styles/style-commons.js') }}"></script>
+      <link rel="stylesheet" href="{{ webpack_asset('styles/style-app.css') }}">
+    {% endif %}
+  {% endblock %}
+  {% block theme_css_block %}
     {% if 'kibela' === layoutType() %}
       {% if env === 'development' %}
-        <script src="{{ webpack_asset('styles/style.js') }}"></script>
         <script src="{{ webpack_asset('styles/theme-kibela.js') }}"></script>
       {% else %}
-        <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
         <link rel="stylesheet" href="{{ webpack_asset('styles/theme-kibela.css') }}">
       {% endif %}
     {% else %}
       {% if env === 'development' %}
-        <script src="{{ webpack_asset('styles/style.js') }}"></script>
         <script src="{{ webpack_asset('styles/theme-' + theme() + '.js') }}"></script>
       {% else %}
-        <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
         <link rel="stylesheet" href="{{ webpack_asset('styles/theme-' + theme() + '.css') }}">
       {% endif %}
     {% endif %}

src/server/views/page_presentation.html

@@ -27,12 +27,10 @@
     {% endif %}
 
     <script src="{{ webpack_asset('js/legacy-presentation.js') }}" defer></script>
+    <link rel="stylesheet" href="{{ webpack_asset('styles/style-presentation.css') }}">
 
     <title>{{ path|path2name }} | {{ path }}</title>
 
-    <!-- styles -->
-    <link rel="stylesheet" href="{{ webpack_asset('styles/style-presentation.css') }}">
-
     {{ cdnStyleTagsByGroup('basis') }}
 
     <style>