From 3440d264af0601615cc0249bcd72b2120d789fb3 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Thu, 10 May 2018 11:44:40 -0400 Subject: [PATCH] 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 --- Open-ILS/src/templates/staff/base.tt2 | 9 ----- Open-ILS/web/js/ui/default/staff/package.json | 3 ++ Open-ILS/web/js/ui/default/staff/webpack.config.js | 43 ++++++++++++++++++---- 3 files changed, 38 insertions(+), 17 deletions(-) diff --git a/Open-ILS/src/templates/staff/base.tt2 b/Open-ILS/src/templates/staff/base.tt2 index 7ce42ae73f..2230825213 100644 --- a/Open-ILS/src/templates/staff/base.tt2 +++ b/Open-ILS/src/templates/staff/base.tt2 @@ -16,16 +16,7 @@ - [% IF EXPAND_WEB_IMPORTS %] - - - - - - - [% ELSE %] - [% END %] diff --git a/Open-ILS/web/js/ui/default/staff/package.json b/Open-ILS/web/js/ui/default/staff/package.json index 2f26fd0ba3..6451153e9a 100644 --- 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 32e97b115d..ea149243cf 100644 --- 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: { -- 2.11.0