Merge remote-tracking branch 'Nerdinacan/webpack_4_mapfix' into unified_webpack4

client/package.json

@@ -37,6 +37,7 @@
     "jquery.cookie": "^1.4.1",
     "latex-parser": "^0.6.2",
     "latex-to-unicode-converter": "^0.5.2",
+    "mini-css-extract-plugin": "^0.4.4",
     "popper.js": "^1.14.4",
     "pyre-to-regexp": "^0.0.5",
     "raven-js": "^3.27.0",
@@ -89,6 +90,7 @@
     "karma-webpack": "^4.0.0-rc.2",
     "mocha": "^5.2.0",
     "node-sass": "^4.9.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "^2.1.7",
     "prettier": "^1.14.3",

client/webpack.config.js

@@ -8,6 +8,9 @@ const libsBase = path.join(scriptsBase, "libs");
 const styleBase = path.join(__dirname, "galaxy/style");
 const imageBase = path.join(__dirname, "../static/style");
 
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
 let buildconfig = {
     entry: {
         login: ["onload", "./galaxy/scripts/apps/login.js"],
@@ -52,7 +55,10 @@ let buildconfig = {
             },
             {
                 test: /\.js$/,
-                exclude: [/(node_modules\/(?!(handsontable)\/)|bower_components)/, libsBase],
+                exclude: [
+                    /(node_modules\/(?!(handsontable)\/)|bower_components)/,
+                    libsBase
+                ],
                 loader: "babel-loader",
                 options: { babelrc: true }
             },
@@ -88,29 +94,34 @@ let buildconfig = {
                     loader: "file-loader",
                     options: {
                         outputPath: "assets",
-                        publicPath: '/static/scripts/bundled/assets/'
+                        publicPath: "/static/scripts/bundled/assets/"
                     }
                 }
             },
             {
-                test: /\.scss$/,
+                test: /\.css$/,
                 use: [
+                    MiniCssExtractPlugin.loader,
                     {
-                        loader: "style-loader"
-                    },
+                        loader: "css-loader",
+                        options: { sourceMap: true }
+                    }
+                ]
+            },
+            {
+                test: /\.scss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
                     {
-                        loader: "css-loader"
+                        loader: "css-loader",
+                        options: { sourceMap: true }
                     },
                     {
-                        loader: "sass-loader"
+                        loader: "sass-loader",
+                        options: { sourceMap: true }
                     }
                 ]
             },
-            //{
-            //    test: /\.css$/,
-            //    use: ["style-loader", "css-loader"],
-            //    exclude: [path.join(libsBase, "components"), /(node_modules\/(?!(handsontable)\/))/]
-            //},
             // Alternative to setting window.bundleEntries
             // Just import "extended" in any endpoint that needs
             // access to these globals, or even-better, make
@@ -123,10 +134,6 @@ let buildconfig = {
                         options: "bundleEntries"
                     }
                 ]
-            },
-            {
-                test: /\.css$/,
-                use: ["style-loader", "css-loader"]
             }
         ]
     },
@@ -149,7 +156,19 @@ let buildconfig = {
             _: "underscore",
             Backbone: "backbone"
         }),
-        new VueLoaderPlugin()
+        new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({
+            filename: "base.css"
+        }),
+        // https://github.com/webpack-contrib/mini-css-extract-plugin/issues/141
+        new OptimizeCssAssetsPlugin({
+            cssProcessorOptions: {
+                map: {
+                    inline: false,
+                    annotation: true
+                }
+            }
+        })
     ]
 };
 

static/style/base.css

@@ -1 +0,0 @@
-./blue/base.css

templates/js-app.mako

@@ -22,7 +22,8 @@
             ##'jquery-ui/smoothness/jquery-ui',
             ## base needs to come after jquery-ui because of ui-button, ui- etc. name collision
             ##'base',
-            ##'bootstrap-tour',
+            ##'bootstrap-tour',,
+            '../scripts/bundled/base'
         )}
         ${ page_setup() }
     </head>
@@ -35,7 +36,7 @@
         ${ h.js(
             'libs/require',
             'bundled/libs.chunk',
-            'bundled/style.chunk',
+            ## 'bundled/style.chunk',
             'bundled/' + js_app_name + '.bundled'
         )}