LP#1770212 Bundle "vendor" CSS with webpack

Create a single vendor (dependency) CSS file containing minified
versions of all of the globally imported 3rd-party CSS so it may all be
loaded from the browser as a single import.

This deprecates EXPAND_WEB_IMPORTS since globally imported JS and CSS are
now both bundled by default via webpack.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/templates/staff/base.tt2 b/Open-ILS/src/templates/staff/base.tt2
index 7ce42ae..2230825 100644 (file)
--- a/Open-ILS/src/templates/staff/base.tt2
+++ b/Open-ILS/src/templates/staff/base.tt2
@@ -16,16 +16,7 @@
     <base href="/eg/staff/">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    [% IF EXPAND_WEB_IMPORTS %]
-    <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/hotkeys.min.css" />
-    <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/ngToast.min.css" />
-    <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/ngToast-animations.min.css" />
-    <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/tree-control.css" />
-    <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/tree-control-attribute.css" />
-    [% ELSE %]
     <link rel="stylesheet" href="[% WEB_BUILD_PATH %]/css/evergreen-staff-client-deps.[% EVERGREEN_VERSION %].min.css" />
-    [% END %]
     <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/cat.css" />
     <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/style.css" />
   </head>

diff --git a/Open-ILS/web/js/ui/default/staff/package.json b/Open-ILS/web/js/ui/default/staff/package.json
index 2f26fd0..6451153 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/package.json
+++ b/Open-ILS/web/js/ui/default/staff/package.json
@@ -8,6 +8,8 @@
     "angular-mocks": "^1.6.7",
     "clean-webpack-plugin": "^0.1.17",
     "copy-webpack-plugin": "^4.3.0",
+    "css-loader": "^0.28.11",
+    "extract-text-webpack-plugin": "^3.0.2",
     "jasmine-core": "^2.99.1",
     "karma": "^1.7.1",
     "karma-jasmine": "^1.1.1",
@@ -16,6 +18,7 @@
     "karma-spec-reporter": "0.0.32",
     "karma-story-reporter": "^0.3.1",
     "phantomjs-prebuilt": "^2.1.16",
+    "style-loader": "^0.21.0",
     "webpack": "^3.10.0",
     "webpack-merge": "^4.1.1"
   },

diff --git a/Open-ILS/web/js/ui/default/staff/webpack.config.js b/Open-ILS/web/js/ui/default/staff/webpack.config.js
index 32e97b1..ea14924 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/webpack.config.js
+++ b/Open-ILS/web/js/ui/default/staff/webpack.config.js
@@ -4,17 +4,22 @@ const webpack = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 const buildPath = 'build';
 
+// Versioning not fully supported.  For now, hard-coded to match the
+// version string in the TT2 web templates.
+const EG_VERSION = '0.0.1';
+
 const CSS_FILES = [
-  'node_modules/angular-hotkeys/build/hotkeys.min.css',
-  'node_modules/bootstrap/dist/css/bootstrap.min.css',
-  'node_modules/ng-toast/dist/ngToast.min.css',
-  'node_modules/ng-toast/dist/ngToast-animations.min.css',
-  'node_modules/angular-tree-control/css/tree-control.css',
-  'node_modules/angular-tree-control/css/tree-control-attribute.css',
-  'node_modules/angular-tablesort/tablesort.css'
+  './node_modules/angular-hotkeys/build/hotkeys.min.css',
+  './node_modules/bootstrap/dist/css/bootstrap.min.css',
+  './node_modules/ng-toast/dist/ngToast.min.css',
+  './node_modules/ng-toast/dist/ngToast-animations.min.css',
+  './node_modules/angular-tree-control/css/tree-control.css',
+  './node_modules/angular-tree-control/css/tree-control-attribute.css',
+  './node_modules/angular-tablesort/tablesort.css'
 ];
 
 const FONT_FILES = [
@@ -112,7 +117,25 @@ let commmonOptions = {
   // and optional service files are still imported via script tags.
   entry: {
     core: coreJsFiles,
-    vendor: vendorJsFiles
+    vendor: vendorJsFiles,
+    vendorCss: CSS_FILES
+  },
+  module: {
+    rules: [
+      {
+        // Creates a vendor css file bundle.  Note an unused
+        // build/js/vendorCss.bundle.js file is also created.  This is a
+        // side effect of ExtractTextPlugin.  It can be ignored.
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: [{
+            loader: "css-loader",
+            options: {url: false, minimize: true}
+          }]
+        })
+      }
+    ]
   },
   plugins: [
     new CleanWebpackPlugin([buildPath]),
@@ -120,6 +143,10 @@ let commmonOptions = {
     new webpack.optimize.CommonsChunkPlugin({
       names: ['core', 'vendor'], // ORDER MATTERS
       minChunks: 2 // TODO: huh?
+    }),
+    new ExtractTextPlugin({
+      filename: 'css/evergreen-staff-client-deps.'+EG_VERSION+'.min.css',
+      allChunks: true
     })
   ],
   output: {