Added Loader for Static Build

Author: pulkitkkr

client/package.json

@@ -94,9 +94,9 @@
     "resolve-url-loader": "^3.0.1",
     "sass-loader": "^6.0.6",
     "sass-resources-loader": "^1.3.3",
-    "style-loader": "^0.19.0",
+    "style-loader": "^0.23.1",
     "turbolinks": "^5.0.3",
-    "url-loader": "^0.6.2",
+    "url-loader": "^1.1.2",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-manifest-plugin": "^2.0.4",

client/webpack.client.base.config.js

@@ -3,6 +3,8 @@
 
 // Common client-side webpack configuration used by webpack.hot.config and webpack.rails.config.
 const webpack = require('webpack');
+
+const urlFileSizeCutover = 10 * 1024;
 const ManifestPlugin = require('webpack-manifest-plugin');
 const { resolve } = require('path');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
@@ -16,7 +18,6 @@ module.exports = {
 
   // the project dir
   context: resolve(__dirname),
-  mode: process.env.NODE_ENV,
   entry: {
     // This will contain the app entry points defined by
     // webpack.client.rails.hot.config and webpack.client.rails.build.config
@@ -51,6 +52,7 @@ module.exports = {
       chunks: 'all',
       cacheGroups: {
         vendors: {
+          name: 'vendor-bundle',
           test: /[\\/]node_modules[\\/]/,
           priority: -10,
           chunks: 'all',
@@ -69,7 +71,6 @@ module.exports = {
       DEBUG: false,
       TRACE_TURBOLINKS: devBuild,
     }),
-    // https://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk
     new ManifestPlugin({
       publicPath: output.publicPath,
       writeToFileEmit: true
@@ -78,20 +79,43 @@ module.exports = {
 
   module: {
     rules: [
+      {
+        test: /\.svg$/,
+        loader: 'svg-url-loader',
+        options: {
+          limit: urlFileSizeCutover,
+          // Remove quotes around the encoded URL –
+          // they’re rarely useful
+          noquotes: true,
+          name: '[name].[hash].[ext]',
+          publicPath: output.publicPath,
+        },
+      },
       {
         test: /\.(ttf|eot)$/,
         use: 'file-loader',
       },
       {
-        test: /\.(woff2?|jpe?g|png|gif|svg|ico)$/,
+        test: /\.(woff2|woff|jpe?g|png|gif|ico)?$/,
         use: {
-          loader: 'url-loader',
+          loader: 'resource-url-loader',
           options: {
-            name: '[name]-[hash].[ext]',
-            limit: 10000,
+            name: '[name].[hash].[ext]',
+            limit: urlFileSizeCutover,
+            publicPath: output.publicPath,
           },
         },
       },
+      {
+        test: /\.jsx?$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+          },
+        },
+        exclude: /node_modules/,
+      },
       {
         test: require.resolve('jquery'),
         use: [
@@ -138,3 +162,4 @@ module.exports = {
     ],
   },
 };
+

client/webpack.client.rails.build.config.js

@@ -5,7 +5,6 @@
 // cd client && yarn run build:client
 // Note that Foreman (Procfile.dev) has also been configured to take care of this.
 
-// const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const merge = require('webpack-merge');
 const config = require('./webpack.client.base.config');
@@ -14,7 +13,10 @@ const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 
 const configPath = resolve('..', 'config');
 const { output } = webpackConfigLoader(configPath);
-
+const sassResources = [
+  './app/assets/styles/app-variables.scss',
+  './app/assets/styles/bootstrap-pre-customizations.scss'
+];
 const devBuild = process.env.NODE_ENV !== 'production';
 
 if (devBuild) {
@@ -33,7 +35,7 @@ module.exports = merge(config, {
       'bootstrap-loader/extractStyles'
     ],
   },
-
+  mode: process.env.NODE_ENV,
   output: {
     filename: '[name]-[chunkhash].js',
     chunkFilename: '[name]-[chunkhash].chunk.js',
@@ -51,46 +53,58 @@ module.exports = merge(config, {
         exclude: /node_modules/,
       },
       {
-        test: /\.(scss|css)$/,
+        test: /\.css$/,
         use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'resolve-url-loader?keepQuery',
-          'svg-fill-loader/encodeSharp',
-          'sass-loader',
+          'style-loader', // For client bundle no MiniCssExtractPlugin
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              importLoaders: 1,
+              localIdentName: '[name]__[local]__[hash:base64:5]',
+            },
+          },
+          'postcss-loader',
         ],
       },
       {
-        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        test: /^((?!\.global).)*\.scss$/,
         use: [
+          'style-loader',
           {
-            loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              importLoaders: 2,
+              localIdentName: '[name]__[local]__[hash:base64:5]',
+            },
           },
+          'postcss-loader',
+          'sass-loader',
           {
-            loader: 'svg-fill-loader?selector=svg',
+            loader: 'sass-resources-loader',
+            options: { resources: sassResources },
           },
         ],
       },
       {
-        test: /bootstrap-sass\/assets\/javascripts\//,
-        loader: 'imports-loader?jQuery=jquery',
-      },
-      {
-        test: /\.(scss|css)$/,
+        test: /\.global\.scss$/,
         use: [
           'style-loader',
-          MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
             options: {
-              minimize: true,
-              sourceMap: true
-            }
+              modules: false,
+              importLoaders: 2,
+            },
           },
+          'postcss-loader',
+          'sass-loader',
           {
-            loader: 'sass-loader'
-          }
-        ]
+            loader: 'sass-resources-loader',
+            options: { resources: sassResources },
+          },
+        ],
       },
       {
         test: require.resolve('react'),
@@ -110,7 +124,7 @@ module.exports = merge(config, {
             jQuery: 'jquery',
           }
         }
-      }
+      },
     ],
   },