Refactor webpack

Author: Quique Fernandez

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss

@@ -28,3 +28,7 @@ body {
     position: fixed;
     top: 50%;
 }
+
+select::-ms-expand {
+    display: none;
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.html

@@ -1,38 +1,35 @@
 <div class="container">
-    <div class="catalog-banner">
-        <img class="catalog-banner-image" src="../../images/main_banner.png" />
-        <div class="container">
-            <img src="../../images/main_banner_text.png" class="catalog-banner-text" />
-        </div>
+    <div class="esh-catalog-hero">
+        <img class="esh-catalog-title" src="../../images/main_banner_text.png"/>
     </div>
-    <div class="catalog-filter">
-        <div class="catalog-filter-container">
+    <div class="esh-catalog-filter">
+        <div class="esh-catalog-filter-container">
             <div class="container">
-                <div data-name="brand" class="catalog-filter-wrapper">
-                    <select class="catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)">
+                <div data-name="brand" class="esh-catalog-filter-wrapper">
+                    <select class="esh-catalog-filter-select" (change)="onBrandFilterChanged($event, $event.target.value)">
                         <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
                     </select>
                 </div>
-                <div data-name="type" class="catalog-filter-wrapper">
-                    <select class="catalog-filter-select" (change)="onTypeFilterChanged($event, $event.target.value)">
+                <div data-name="type" class="esh-catalog-filter-wrapper">
+                    <select class="esh-catalog-filter-select" (change)="onTypeFilterChanged($event, $event.target.value)">
                         <option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
                     </select>
                 </div>
-                <button class="catalog-filter-button" (click)="onFilterApplied($event)">
+                <button class="esh-catalog-filter-button" (click)="onFilterApplied($event)">
                     <img src="../../images/arrow-right.svg">
                 </button>
             </div>
         </div>
     </div>
     <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
-    <div class="catalog-content row">
-        <div class="col-md-4 catalog-content-item" *ngFor="let item of catalog?.data">
+    <div class="esh-catalog-content row">
+        <div class="col-md-4 esh-catalog-content-item" *ngFor="let item of catalog?.data">
             <img src="{{item.pictureUri}}" />
-            <button (click)="addToCart(item)" class="catalog-content-item-button">[ ADD TO CART ]</button>
-            <div class="catalog-content-item-title">
+            <button (click)="addToCart(item)" class="esh-catalog-content-item-button">[ ADD TO CART ]</button>
+            <div class="esh-catalog-content-item-title">
                 <span>{{item.name}}</span>
             </div>
-            <div class="catalog-content-item-price">
+            <div class="esh-catalog-content-item-price">
                 <span>{{item.price}}</span>
             </div>
         </div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss

@@ -1,36 +1,30 @@
-@import '../_variables.scss';
+@import '../variables';
 
-select::-ms-expand {
-    display: none;
-}
-
-.catalog {
-    &-banner {
-        height: 258px;
-        vertical-align: middle;
+.esh-catalog {
 
-        &-image {
-            width: 100%;
-            position: absolute;
-            left: 0;
-            height: 258px;
-        }
+    $banner-height: 260px;
+    &-hero {
+        background-image: url('../../images/main_banner.png');
+        background-size: cover;
+        height: $banner-height;
+        width: 100%;
+    }
 
-        &-text {
-            position: relative;
-            top: 75px;
-        }
+    &-title {
+        position: relative;
+        top: $banner-height / 3.5;
     }
 
+    $filter-height: 65px;
     &-filter {
-        height: 65px;
+        height: $filter-height;
 
         &-container {
-            position: absolute;
-            width: 100%;
             background-color: $color-brand;
+            height: $filter-height;
             left: 0;
-            height: 65px;
+            position: absolute;
+            width: 100%;
         }
 
         &-button {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts

@@ -8,7 +8,7 @@ import { IPager }               from '../shared/models/pager.model';
 import { BasketWrapperService}  from '../shared/services/basket.wrapper.service';
 
 @Component({
-    selector: 'esh-catalog .catalog',
+    selector: 'esh-catalog .esh-catalog',
     styleUrls: ['./catalog.component.scss'],
     templateUrl: './catalog.component.html'
 })

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss

@@ -1,4 +1,4 @@
-.identity {
+/*.identity {
     &-user {
         position: absolute !important;
         top: 30px;
@@ -53,7 +53,7 @@
     }
 
     &-downArrow {
-        background-image: url('../images/arrow-down.png');
+        background-image: url('../../../../images/arrow-down.png');
         height: 7px;
         width: 10px;
         display: inline-block;
@@ -65,18 +65,18 @@
     }
 
     &-ordersIcon {
-        background-image: url('../images/my_orders.PNG');
+        background-image: url('../../../../images/my_orders.png');
         display: inline-block;
         height: 20px;
         width: 20px;
         margin-left: 15px;
     }
 
     &-logOutIcon {
-        background-image: url('../images/logout.PNG');
+        background-image: url('../../../../images/logout.PNG');
         display: inline-block;
         height: 19px;
         width: 19px;
         margin-left: 15px;
     }
-}
+}*/

src/Web/WebSPA/eShopOnContainers.WebSPA/config/webpack.config.js

@@ -22,31 +22,25 @@ module.exports = merge({
                 loaders: ['awesome-typescript-loader?forkChecker=true ', 'angular2-template-loader', 'angular2-router-loader']
             },
             { test: /\.html$/, loader: "html" },
-            { test: /\.css/, loader: extractCSS.extract(['css']) },
-            { test: /\.scss$/, loaders: ['raw-loader', 'sass-loader?sourceMap'] },
+            { test: /\.scss$/, loader: 'exports-loader?module.exports.toString()!css-loader!sass-loader' },
             { test: /\.json$/, loader: 'json-loader' },
             {
                 test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, {
                 test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, {
                 test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, {
                 test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
+                loader: "file-loader"
             }, 
             {
                 test: /\.(png|jpg|gif|svg)$/,
-                loader: "file"
+                loader: "file-loader?name=images/[name].[ext]"
             }
-
-            //        {
-            //        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-            //loader: "url?limit=10000&mimetype=image/svg+xml"
-            //}
         ]
     },
     entry: {

src/Web/WebSPA/eShopOnContainers.WebSPA/package.json

@@ -17,8 +17,6 @@
   },
   "scripts": {
     "rimraf": "rimraf",
-    "tslint": "tslint",
-    "typedoc": "typedoc",
     "typings": "typings",
     "webpack": "webpack",
     "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage wwwroot/dist",
@@ -33,8 +31,6 @@
     "setprod": "set ASPNETCORE_ENVIRONMENT=Production",
     "build:dev": "npm run setdev && npm run clean:dist && npm run build:vendor && npm run build:main",
     "build:prod": "npm run setprod && npm run clean:dist && npm run build:vendor && npm run build:main",
-    "lint": "npm run tslint \"Client/**/*.ts\"",
-    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./Client/",
     "version": "npm run build"
   },
   "dependencies": {
@@ -53,6 +49,7 @@
     "aspnet-webpack": "1.0.24",
     "bootstrap": "4.0.0-alpha.5",
     "core-js": "2.4.1",
+    "file-loader": "^0.9.0",
     "font-awesome": "4.6.3",
     "isomorphic-fetch": "2.2.1",
     "normalize.css": "5.0.0",
@@ -80,7 +77,7 @@
     "css-loader": "0.25.0",
     "es6-promise": "3.2.1",
     "es6-promise-loader": "1.0.2",
-    "expose-loader": "0.7.1",
+    "exports-loader": "^0.6.3",
     "extendify": "1.0.0",
     "extract-text-webpack-plugin": "2.0.0-beta.4",
     "file-loader": "0.9.0",
@@ -89,18 +86,14 @@
     "json-loader": "0.5.4",
     "node-sass": "3.9.3",
     "parse5": "2.1.5",
-    "raw-loader": "0.5.1",
     "rimraf": "2.5.4",
     "sass-loader": "4.0.2",
-    "source-map-loader": "0.1.5",
-    "style-loader": "0.13.1",
     "ts-helpers": "1.1.1",
     "ts-node": "1.4.3",
     "tslint": "3.15.1",
-    "tslint-loader": "2.1.5",
     "typedoc": "0.5.0",
     "typescript": "2.0.6",
-    "url-loader": "0.5.7",
+    "url-loader": "^0.5.7",
     "webpack": "2.1.0-beta.25",
     "webpack-externals-plugin": "1.0.0",
     "webpack-hot-middleware": "2.13.0",