[Webpack] Change images to not use relative path. (#423)

* Change webpack config to not use relative path for images.

Resolves #421.

* Move popup images to popup/images.

* Move images to popup/images.

src/popup/app/accounts/views/accountsLoginTwoFactor.html

@@ -86,7 +86,7 @@
     <div class="content">
         <div class="two-factor-key-page">
             <p>{{i18n.insertYubiKey}}</p>
-            <img src="../../../../images/two-factor/yubikey.jpg" alt="" class="img-rounded img-responsive" />
+            <img src="../../../images/two-factor/yubikey.jpg" alt="" class="img-rounded img-responsive" />
         </div>
         <div class="list">
             <div class="list-section">
@@ -125,7 +125,7 @@
             <p ng-if="!u2fReady">Loading...</p>
             <div ng-if="u2fReady">
                 <p>{{i18n.insertU2f}}</p>
-                <img src="../../../../images/two-factor/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
+                <img src="../../../images/two-factor/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
             </div>
         </div>
         <div class="list">

src/popup/app/global/home.html

@@ -2,7 +2,7 @@
     <a ui-sref="environment({animation: 'in-slide-up'})" class="settings-icon">
         <i class="fa fa-cog fa-lg"></i><span>&nbsp;Settings</span>
     </a>
-    <img src="../../../images/logo@2x.png" alt="bitwarden" />
+    <img src="../../images/logo@2x.png" alt="bitwarden" />
     <p>{{i18n.loginOrCreateNewAccount}}</p>
     <div class="bottom-buttons">
         <a class="btn btn-lg btn-primary btn-block" ui-sref="register({animation: 'in-slide-up'})"

src/popup/app/global/splash.html

@@ -1,5 +1,5 @@
 <div class="content">
     <div class="splash-page">
-        <img src="../../../images/logo@3x.png" alt="bitwarden" />
+        <img src="../../images/logo@3x.png" alt="bitwarden" />
     </div>
 </div>

src/popup/app/settings/about.component.html

@@ -6,7 +6,7 @@
 </div>
 <div class="content">
     <div class="about-page">
-        <img src="../../../images/logo@3x.png" alt="bitwarden" />
+        <img src="../../images/logo@3x.png" alt="bitwarden" />
         {{$ctrl.i18n.version}} {{$ctrl.version}}<br />
         &copy; 8bit Solutions LLC 2015-{{$ctrl.year}}
     </div>

src/popup/less/components.less

@@ -588,7 +588,7 @@
 }
 
 #duoFrameWrapper {
-    background: ~"url('../../images/loading.svg') 0 0 no-repeat";
+    background: ~"url('../images/loading.svg') 0 0 no-repeat";
     width: 100%;
     height: 470px;
     margin-bottom: -10px;

webpack.common.js

@@ -48,11 +48,13 @@ module.exports = {
             },
             {
                 test: /\.(jpe?g|png|gif|svg)$/i,
+                exclude: /.*(fontawesome-webfont|glyphicons-halflings-regular)\.svg/,
                 use: [{
                     loader: 'file-loader',
                     options: {
-                        name: '[name].[ext]',
+                        name: '[name].[hash].[ext]',
-                        useRelativePath: true
+                        outputPath: 'popup/images/',
+                        publicPath: '/'
                     }
                 }]
             }