Style chunk, now with mini-css-extract-plugin

client/package.json

@@ -93,6 +93,7 @@
     "karma-polyfill": "^1.0.0",
     "karma-qunit": "^1.2.1",
     "karma-webpack": "^2.0.6",
+    "mini-css-extract-plugin": "^0.4.4",
     "mocha": "^5.2.0",
     "node-sass": "^4.9.3",
     "phantomjs-polyfill": "0.0.2",

client/webpack.config.js

@@ -2,6 +2,7 @@
 const webpack = require("webpack");
 const path = require("path");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const scriptsBase = path.join(__dirname, "galaxy/scripts");
 const libsBase = path.join(scriptsBase, "libs");
@@ -31,10 +32,11 @@ let buildconfig = {
                     test: /(node_modules|galaxy\/scripts\/(?!apps))/,
                     chunks: "initial"
                 },
-                style: {
-                    name: "style",
-                    test: /(node_modules|galaxy\/style\/)/,
-                    chunks: "initial"
+                styles: {
+                    name: "styles",
+                    test: /\.css$/,
+                    chunks: "all",
+                    enforce: true
                 }
             }
         }
@@ -93,7 +95,7 @@ let buildconfig = {
                     loader: "file-loader",
                     options: {
                         outputPath: "assets",
-                        publicPath: '/static/scripts/bundled/assets/'
+                        publicPath: "/static/scripts/bundled/assets/"
                     }
                 }
             },
@@ -101,8 +103,11 @@ let buildconfig = {
                 test: /\.scss$/,
                 use: [
                     {
-                        loader: "style-loader"
+                        loader: MiniCssExtractPlugin.loader
                     },
+                    //{
+                    //    loader: "style-loader"
+                    //},
                     {
                         loader: "css-loader"
                     },
@@ -131,7 +136,11 @@ let buildconfig = {
             },
             {
                 test: /\.css$/,
-                use: ["style-loader", "css-loader"]
+                use: [
+                    "style-loader",
+                    //MiniCssExtractPlugin.loader,
+                    "css-loader"
+                ]
             }
         ]
     },
@@ -154,6 +163,10 @@ let buildconfig = {
             _: "underscore",
             Backbone: "backbone"
         }),
+        new MiniCssExtractPlugin({
+            filename: "[name].css",
+            chunkFilename: "[id].css"
+        }),
         new VueLoaderPlugin()
     ]
 };

client/yarn.lock

@@ -8383,6 +8383,15 @@ mimic-fn@^1.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
+mini-css-extract-plugin@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.4.tgz#c10410a004951bd3cedac1da69053940fccb625d"
+  integrity sha512-o+Jm+ocb0asEngdM6FsZWtZsRzA8koFUudIDwYUfl94M3PejPHG7Vopw5hN9V8WsMkSFpm3tZP3Fesz89EyrfQ==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 mini-html-webpack-plugin@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/mini-html-webpack-plugin/-/mini-html-webpack-plugin-0.2.3.tgz#2dfbdc3f35f6ae03864a608808381f8137311ea0"

static/style/base.css

@@ -1 +1 @@
-./blue/base.css
+../scripts/bundled/analysis.css