use webpack-merge (#838)

- fix hot config bundle name

Author: kaizencodes

spec/dummy/client/package.json

@@ -46,7 +46,8 @@
     "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",
     "webpack": "^2.3.3",
-    "webpack-manifest-plugin": "^1.1.0"
+    "webpack-manifest-plugin": "^1.1.0",
+    "webpack-merge": "^4.1.0"
   },
   "devDependencies": {
     "babel-plugin-react-transform": "^2.0.2",

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

@@ -5,6 +5,7 @@
 /* eslint-disable comma-dangle */
 
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const merge = require('webpack-merge');
 const config = require('./webpack.client.base.config');
 const { resolve } = require('path');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
@@ -13,101 +14,104 @@ const { paths, publicPath } = webpackConfigLoader(configPath);
 
 const devBuild = process.env.NODE_ENV !== 'production';
 
-config.output = {
-  filename: '[name].js',
-  path: resolve('..', paths.output, paths.assets),
-  publicPath,
-},
+if (devBuild) {
+  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
+  config.devtool = 'eval-source-map';
+} else {
+  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
+}
 
-// See webpack.client.base.config for adding modules common to both the webpack dev server and rails
+module.exports = merge(config, {
 
-config.module.rules.push(
-  {
-    test: /\.jsx?$/,
-    use: 'babel-loader',
-    exclude: /node_modules/,
+  output: {
+    filename: '[name].js',
+    path: resolve('..', paths.output, paths.assets),
+    publicPath,
   },
-  {
-    test: /\.css$/,
-    loader: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      use: [
-        {
-          loader: 'css-loader',
-          options: {
-            minimize: true,
-            modules: true,
-            importLoaders: 1,
-            localIdentName: '[name]__[local]__[hash:base64:5]',
-          },
-        },
-        'postcss-loader',
-      ],
-    }),
-  },
-  {
-    test: /\.scss$/,
-    use: ExtractTextPlugin.extract({
-      fallback: 'style-loader',
-      loader: [
-        {
-          loader: 'css-loader',
-          options: {
-            minimize: true,
-            modules: true,
-            importLoaders: 3,
-            localIdentName: '[name]__[local]__[hash:base64:5]',
-          },
-        },
-        {
-          loader: 'postcss-loader',
+
+  // See webpack.client.base.config for adding modules common to both the webpack dev server and rails
+
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                minimize: true,
+                modules: true,
+                importLoaders: 1,
+                localIdentName: '[name]__[local]__[hash:base64:5]',
+              },
+            },
+            'postcss-loader',
+          ],
+        }),
+      },
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          loader: [
+            {
+              loader: 'css-loader',
+              options: {
+                minimize: true,
+                modules: true,
+                importLoaders: 3,
+                localIdentName: '[name]__[local]__[hash:base64:5]',
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: 'autoprefixer'
+              }
+            },
+            'sass-loader',
+            {
+              loader: 'sass-resources-loader',
+              options: {
+                resources: './app/assets/styles/app-variables.scss'
+              },
+            }
+          ],
+        }),
+      },
+      {
+        test: require.resolve('react'),
+        use: {
+          loader: 'imports-loader',
           options: {
-            plugins: 'autoprefixer'
+            shim: 'es5-shim/es5-shim',
+            sham: 'es5-shim/es5-sham',
           }
-        },
-        'sass-loader',
-        {
-          loader: 'sass-resources-loader',
+        }
+      },
+      {
+        test: require.resolve('jquery-ujs'),
+        use: {
+          loader: 'imports-loader',
           options: {
-            resources: './app/assets/styles/app-variables.scss'
-          },
+            jQuery: 'jquery',
+          }
         }
-      ],
-    }),
-  },
-  {
-    test: require.resolve('react'),
-    use: {
-      loader: 'imports-loader',
-      options: {
-        shim: 'es5-shim/es5-shim',
-        sham: 'es5-shim/es5-sham',
       }
-    }
+    ],
   },
-  {
-    test: require.resolve('jquery-ujs'),
-    use: {
-      loader: 'imports-loader',
-      options: {
-        jQuery: 'jquery',
-      }
-    }
-  }
-);
 
-config.plugins.push(
-  new ExtractTextPlugin({
-    filename: '[name].css',
-    allChunks: true
-  })
-);
-
-if (devBuild) {
-  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
-  config.devtool = 'eval-source-map';
-} else {
-  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
-}
-
-module.exports = config;
+  plugins: [
+    new ExtractTextPlugin({
+      filename: '[name].css',
+      allChunks: true
+    }),
+  ],
+});