Extract CSS to file in production builds (#3783)

* Extract CSS to file if production build

* Use DAPPS_URL for testing purposes + better assets in Webpack

* Delete comments

js/src/views/Dapp/dapp.js

@@ -51,9 +51,16 @@ export default class Dapp extends Component {
         src = `${dappsUrl}/${app.contentHash}/`;
         break;
       default:
-        const dapphost = process.env.NODE_ENV === 'production' && !app.secure
+        let dapphost = process.env.DAPPS_URL || (
-          ? `${dappsUrl}/ui`
+          process.env.NODE_ENV === 'production' && !app.secure
-          : '';
+            ? `${dappsUrl}/ui`
+            : ''
+        );
+
+        if (dapphost === '/') {
+          dapphost = '';
+        }
+
         src = `${dapphost}/${app.url}.html`;
         break;
     }

js/webpack/app.js

@@ -20,6 +20,7 @@ const path = require('path');
 const WebpackErrorNotificationPlugin = require('webpack-error-notification');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const Shared = require('./shared');
 const DAPPS = require('../src/dapps');
@@ -41,7 +42,7 @@ module.exports = {
   output: {
     publicPath: '/',
     path: path.join(__dirname, '../', DEST),
-    filename: '[name].[hash].js'
+    filename: '[name].[hash:10].js'
   },
 
   module: {
@@ -85,13 +86,20 @@ module.exports = {
       {
         test: /\.css$/,
         include: [ /src/ ],
+        // exclude: [ /src\/dapps/ ],
+        loader: isProd ? ExtractTextPlugin.extract([
+          // 'style-loader',
+          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+          'postcss-loader'
+        ]) : undefined,
         // use: [ 'happypack/loader?id=css' ]
-        use: [
+        use: isProd ? undefined : [
           'style-loader',
           'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
           'postcss-loader'
         ]
       },
+
       {
         test: /\.css$/,
         exclude: [ /src/ ],
@@ -99,11 +107,15 @@ module.exports = {
       },
       {
         test: /\.(png|jpg)$/,
-        use: [ 'file-loader?name=[name].[hash].[ext]' ]
+        use: [ 'file-loader?&name=assets/[name].[hash:10].[ext]' ]
       },
       {
-        test: /\.(woff(2)|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        test: /\.(woff(2)|ttf|eot|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: [ 'file-loader' ]
+        use: [ 'file-loader?name=fonts/[name][hash:10].[ext]' ]
+      },
+      {
+        test: /\.svg(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [ 'file-loader?name=assets/[name].[hash:10].[ext]' ]
       }
     ],
     noParse: [
@@ -153,13 +165,20 @@ module.exports = {
     if (!isProd) {
       plugins.push(
         new webpack.optimize.CommonsChunkPlugin({
-          filename: 'commons.[hash].js',
+          filename: 'commons.[hash:10].js',
           name: 'commons',
           minChunks: Infinity
         })
       );
     }
 
+    if (isProd) {
+      plugins.push(new ExtractTextPlugin({
+        filename: 'styles/[name].[hash:10].css',
+        allChunks: true
+      }));
+    }
+
     return plugins;
   }())
 };