feat(build): load css before script

app/index.html

@@ -32,10 +32,10 @@
   }"
   ng-cloak>
     <div id="sideview" ui-view="sidebar" ng-if="!applicationState.loading"></div>
-
+  
     <div id="content-wrapper">
       <div class="page-content">
-
+  
         <div class="page-wrapper" ng-if="applicationState.loading">
           <!-- loading box -->
           <div class="container simple-box">
@@ -43,7 +43,7 @@
               <!-- loading box logo -->
               <div class="row">
                 <img ng-if="logo" ng-src="{{ logo }}" class="simple-box-logo">
-                <img ng-if="!logo" src="images/logo_alt.png" class="simple-box-logo" alt="Portainer">
+                <img ng-if="!logo" src="${require('../assets/images/logo_alt.png')}" class="simple-box-logo" alt="Portainer">
               </div>
               <!-- !loading box logo -->
               <!-- panel -->
@@ -56,10 +56,10 @@
           </div>
           <!-- !loading box -->
         </div>
-
+  
         <!-- Main Content -->
         <div id="view" ui-view="content" ng-if="!applicationState.loading"></div>
-
+  
       </div><!-- End Page Content -->
     </div><!-- End Content Wrapper -->
   </div><!-- End Page Wrapper -->

assets/css/vendor.css

@@ -1,14 +1,14 @@
-@import url('../../node_modules/ui-select/dist/select.css');
+@import url('~ui-select/dist/select.css');
-@import url('../../node_modules/bootstrap/dist/css/bootstrap.css');
+@import url('~bootstrap/dist/css/bootstrap.css');
-@import url('../../node_modules/isteven-angular-multiselect/isteven-multi-select.css');
+@import url('~isteven-angular-multiselect/isteven-multi-select.css');
-@import url('../../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css');
+@import url('~@fortawesome/fontawesome-free-webfonts/css/fa-brands.css');
-@import url('../../node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css');
+@import url('~@fortawesome/fontawesome-free-webfonts/css/fa-solid.css');
-@import url('../../node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css');
+@import url('~@fortawesome/fontawesome-free-webfonts/css/fontawesome.css');
-@import url('../../node_modules/toastr/build/toastr.css');
+@import url('~toastr/build/toastr.css');
-@import url('../../node_modules/xterm/dist/xterm.css');
+@import url('~xterm/dist/xterm.css');
-@import url('../../node_modules/angularjs-slider/dist/rzslider.css');
+@import url('~angularjs-slider/dist/rzslider.css');
-@import url('../../node_modules/codemirror/lib/codemirror.css');
+@import url('~codemirror/lib/codemirror.css');
-@import url('../../node_modules/codemirror/addon/lint/lint.css');
+@import url('~codemirror/addon/lint/lint.css');
-@import url('../../node_modules/angular-json-tree/dist/angular-json-tree.css');
+@import url('~angular-json-tree/dist/angular-json-tree.css');
-@import url('../../node_modules/angular-loading-bar/build/loading-bar.css');
+@import url('~angular-loading-bar/build/loading-bar.css');
-@import url('../../node_modules/rdash-ui/dist/css/rdash.css');
+@import url('~rdash-ui/dist/css/rdash.css');

package.json

@@ -95,6 +95,7 @@
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "load-grunt-tasks": "^3.5.2",
+    "mini-css-extract-plugin": "^0.4.4",
     "ngtemplate-loader": "^2.0.1",
     "style-loader": "^0.23.1",
     "url-loader": "^1.1.1",

webpack.config.js

@@ -3,8 +3,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
 const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
 const { ProvidePlugin } = require('webpack');
-const npmPackage = require('./package.json');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
+const npmPackage = require('./package.json');
 module.exports = {
   entry: './app/__module.js',
   output: {
@@ -46,7 +47,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader?sourceMap']
+        use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap']
       }
     ]
   },
@@ -70,6 +71,12 @@ module.exports = {
       jQuery: 'jquery',
       'window.jQuery': 'jquery'
       // angular: 'angular'
+    }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: "[name].css",
+      chunkFilename: "[id].css"
     })
   ]
 };

yarn.lock

@@ -5014,6 +5014,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"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"